Morphous Catalog

Morphous Catalog

Core Rule

Morphous is a website for browsing motif-driven design systems and shadcn/tweakcn-compatible themes. Generate creative bitmap assets with the Codex image tool (imagegen skill), not repo scripts. Scripts may assemble metadata, sample colors, remove chroma-key backgrounds, write theme files, and validate assets, but they must not fabricate the motif, design-system boards, or generated web example images.

Use Bun for project commands (bun run ...). If a Python helper or validator is needed, run it through uv (for example uv run --with pyyaml python ...); do not call python or python3 directly. Do not create or update PowerPoint output unless the user explicitly reintroduces that requirement.

Motif Workflow

1. Pick or confirm one system identity: slug, display name, motif subject, motif category (animal, insect, plant, landscape, mineral, weather, etc.), biome/context, and design mood.
2. Generate the motif first as an isolated transparent-background asset. For the built-in image tool, use the imagegen transparent workflow: generate on a flat removable chroma-key background, remove it locally, then validate alpha. Save the final PNG to public/systems/{slug}/motif.png or animal.png when preserving an older bundle contract.
3. Generate design-system-light.png from the motif image as a source reference. It must be one comprehensive high-resolution board containing palette, typography, multilingual type guidance, components, navigation, dashboard/data, forms, texture, spacing/radius/shadow tokens, and sample usage.
4. Generate design-system-dark.png as a separate high-resolution image-tool call from the same motif and light board. It must feel like the same system translated to dark mode.
5. Generate additional web assets only when useful: hero.png, texture.png, background.png, example app screens, pattern crops, or card imagery. Keep these derived from the motif and boards.
6. Record every final image-generation prompt in that system's public/systems/{slug}/prompts.json. Prompts are user-facing assets; include enough detail for users to reuse them.
7. Record system identity, palette, theme references, and asset paths in that system's public/systems/{slug}/system.json.
8. Derive and export shadcn/tweakcn theme tokens from the motif and boards, then update catalog metadata and website routes.
9. Validate the theme, generated assets, catalog, and app before finishing.

Asset Contract

Each Morphous system should write:

• public/systems/{slug}/motif.png or animal.png for legacy systems
• public/systems/{slug}/design-system-light.png or design-system.png for legacy systems
• public/systems/{slug}/design-system-dark.png
• public/systems/{slug}/theme.css
• public/systems/{slug}/theme.json
• public/systems/{slug}/prompts.json
• public/systems/{slug}/system.json
• Optional generated assets: hero.png, texture.png, background.png, examples/*.png

Catalog metadata must be written to src/data/systems.json and src/data/systems.ts. Metadata should include:

• motif identity and category
• light and dark design-system board paths
• shadcn/tweakcn tokens for light and dark mode
• generated assets
• reusable prompts

Prompts and system metadata are canonical inside each individual system folder. Do not hard-code a new theme's prompts, palette, or asset list in the shared catalog generator.

Design-System Board Rules

• The motif image is the source of truth. Sample or derive visible colors from the motif, not a generic theme.
• Generate light and dark boards as separate image-tool calls.
• Design-system boards must be high-resolution source assets. Target 4K-class 16:9 output and accept at least 2400px wide when the active image tool path supports it. If the saved board is below 2000px wide, visibly blurry, or has unreadable labels, regenerate before cataloging it.
• Keep text large enough to survive gallery preview downscaling. Do not overpack tiny token tables; use fewer, larger rows if needed so palette names, typography labels, and component labels remain legible.
• Include typography guidance for English and Japanese. Add multilingual guidance for other scripts when the motif or target audience suggests it.
• Include enough UI coverage to guide implementation: buttons, inputs, selects, textarea, checkboxes, radio, switch, tabs, badges, alerts, cards, tables, command/search, navigation, dashboard charts, empty/error/loading states, spacing, radius, border, shadow, texture, and icons.
• Keep colors faithful to the motif: body/fur/wing/petal/stone/water colors, markings, shadows, highlights, and environmental context.
• Avoid unrelated saturated colors, generic purple/blue gradients, stock UI kits, illegible text, and one-note palettes.