open-design/skills/editorial-collage/inputs.example.json

{
  "$schema": "./schema.ts",
  "_doc": "Worked example — Open Design as the brand. Run `pnpm dlx tsx scripts/compose.ts inputs.example.json out/example.html` to regenerate the canonical example.html from this file. Every field maps to a typed entry in schema.ts.",

  "brand": {
    "name": "Open Design",
    "mark": "Ø",
    "meta": { "title": "Studio Nº 01", "subtitle": "Berlin / Open / Earth" },
    "filed_under": "Design · Intelligence",
    "tagline": "Designing intelligence with skills, taste, and your own agent.",
    "description": "Open Design is the open-source alternative to Claude Design. 12 coding-agent CLIs · 31 composable skills · 72 brand-grade design systems. Local-first, web-deployable, BYOK at every layer.",
    "locale": "en",
    "edition": "Vol. 01 / Issue Nº 26",
    "version": "v0.2.0",
    "license": "Apache-2.0",
    "primary_url": "https://github.com/nexu-io/open-design",
    "primary_url_label": "Star · 0K",
    "download_url": "https://github.com/nexu-io/open-design/releases",
    "download_url_label": "Download",
    "contact_email": "https://github.com/nexu-io/open-design/issues",
    "location": "Berlin / Open / Earth",
    "coordinates": "52.5200° N · 13.4050° E",
    "year": "2026",
    "year_roman": "MMXXVI",
    "founded": "Est. MMXXVI",
    "rails": {
      "right": "Open Design — Vol. 01 · Issue Nº 26 · Apache-2.0",
      "left": "Skills · Systems · Agents · BYOK · Local-first"
    },
    "languages": ["EN", "DE", "中文", "日本語"],
    "status": "Live · v0.2.0"
  },

  "nav": [
    { "label": "Skills", "href": "https://github.com/nexu-io/open-design/tree/main/skills", "count": "31" },
    { "label": "Systems", "href": "https://github.com/nexu-io/open-design/tree/main/design-systems", "count": "72" },
    { "label": "Agents", "href": "#agents", "count": "12" },
    { "label": "Labs", "href": "#labs", "count": "05" },
    { "label": "Contact", "href": "#contact" }
  ],

  "rules": {
    "about":        { "roman": "II.",   "meta": ["About / Manifesto",            "•", "Open Design / Volume 01"], "pagination": "002 / 008" },
    "capabilities": { "roman": "III.",  "meta": ["Capabilities · Skills · Systems", "•", "4 surfaces / 1 loop"],   "pagination": "003 / 008" },
    "labs":         { "roman": "IV.",   "meta": ["Labs / Skills Catalog",         "•", "05 of 31 ongoing"],         "pagination": "004 / 008" },
    "method":       { "roman": "V.",    "meta": ["Method / Loop",                 "•", "04 stages, iterative"],     "pagination": "005 / 008" },
    "work":         { "roman": "VI.",   "meta": ["Selected Work · 2026 Catalog",  "•", "Edited by Open Design"],    "pagination": "006 / 008" },
    "testimonial":  { "roman": "VII.",  "meta": ["Collaborators / Lineage",       "•", "Standing on shoulders"],    "pagination": "007 / 008" },
    "cta":          { "roman": "VIII.", "meta": ["Contact / Conversation",        "•", "Three commands to ship"],   "pagination": "008 / 008" }
  },

  "hero": {
    "label": "Open-source design studio",
    "ix": "· Nº 01",
    "headline": [
      { "text": "Designing " },
      { "text": "intelligence", "em": true },
      { "text": " with skills, " },
      { "text": "taste,", "em": true },
      { "text": " and " },
      { "text": "code", "em": true },
      { "text": ".", "dot": true }
    ],
    "lead": "The open-source alternative to Anthropic’s Claude Design. 12 coding agents — Claude, Codex, Cursor, Gemini and friends — drive 31 composable skills and 72 brand-grade design systems. Generate web pages, slide decks, mobile prototypes, images, even short videos — all running on your own laptop.",
    "primary":   { "label": "Star us on GitHub",  "href": "https://github.com/nexu-io/open-design" },
    "secondary": { "label": "Download desktop",   "href": "https://github.com/nexu-io/open-design/releases" },
    "stats": [
      { "value": "31", "label": "skills",  "sub": "shippable", "variant": "solid" },
      { "value": "72", "label": "systems", "sub": "portable",  "variant": "dashed" },
      { "value": "12", "label": "CLIs",    "sub": "BYO agent", "variant": "coral" }
    ],
    "meta": "↳   pnpm tools-dev   ·   3 commands to start",
    "index": [
      { "num": "01", "label": "Detect"   },
      { "num": "02", "label": "Discover", "active": true },
      { "num": "03", "label": "Direct"   },
      { "num": "04", "label": "Deliver"  }
    ],
    "annotations": {
      "tl": "FIG. 01 / OD-26",
      "tr": "Plate Nº 08",
      "bl": "SHA · a1b2c3d",
      "br": "Composed in&nbsp;<span style='color:var(--coral);'>Open Design</span>"
    }
  },

  "about": {
    "label": "About the studio",
    "ix": "· Nº 02",
    "headline": [
      { "text": "We treat " },
      { "text": "your agent", "em": true },
      { "text": " as a creative " },
      { "text": "collaborator,", "em": true },
      { "text": " not a black box" },
      { "text": ".", "dot": true }
    ],
    "lead": "The strongest coding agents already live on your laptop. We don't ship one — we wire them into a skill-driven design workflow that runs locally with <code class='code-inline'>pnpm tools-dev</code>, deploys the web layer to Vercel, and stays BYOK at every layer.",
    "cta_label": "Read our approach",
    "cta_href": "https://github.com/nexu-io/open-design/tree/main/apps/daemon",
    "footer_text": "Research · Design · Engineering · Repeat",
    "stamp_top": "Studio practice",
    "stamp_bottom": "Est. MMXXVI",
    "side_note": "From model behavior<br/>to visual taste, we<br/>prototype the full<br/>stack of creative<br/>systems.",
    "caption": {
      "bold": "Studies in form · perception · machine imagination.",
      "rest": "(Open Design, MMXXVI)"
    }
  },

  "capabilities": {
    "label": "Capabilities",
    "ix": "· Nº 03",
    "headline": [
      { "text": "Skills, systems, and surfaces " },
      { "text": "for creative", "em": true },
      { "text": " intelligence" },
      { "text": ".", "dot": true }
    ],
    "lead": "We blend human taste with whichever agent you already trust to ship interfaces, decks, and editorial pages that feel intentional, expressive, and alive.",
    "ribbon": "<b>OPEN DESIGN</b> &nbsp;·&nbsp; CAPABILITIES MATRIX &nbsp;·&nbsp; OD/26",
    "cards": [
      {
        "num": "01",
        "tag": "Skills",
        "icon_svg": "<circle cx='9' cy='9' r='5'/><path d='M14 14l5 5'/>",
        "title": "Skills,\nnot plugins",
        "body": "31 file-based <code class='code-inline sm'>SKILL.md</code> bundles. Drop a folder in, restart the daemon, it appears.",
        "href": "https://github.com/nexu-io/open-design/tree/main/skills"
      },
      {
        "num": "02",
        "tag": "Systems",
        "icon_svg": "<rect x='3.5' y='3.5' width='8' height='8'/><rect x='12.5' y='3.5' width='8' height='8'/><rect x='3.5' y='12.5' width='8' height='8'/><rect x='12.5' y='12.5' width='8' height='8'/>",
        "title": "Design Systems\nas Markdown",
        "body": "72 portable <code class='code-inline sm'>DESIGN.md</code> systems — Linear, Vercel, Stripe, Apple, Cursor, Figma…",
        "href": "https://github.com/nexu-io/open-design/tree/main/design-systems"
      },
      {
        "num": "03",
        "tag": "Adapters",
        "icon_svg": "<circle cx='8' cy='12' r='4.5'/><circle cx='16' cy='12' r='4.5'/>",
        "title": "12 Agent\nAdapters",
        "body": "Claude · Codex · Gemini · Cursor · Copilot · OpenCode · Devin · Hermes · Pi · Kimi · Kiro · Qwen — auto-detected on $PATH.",
        "href": "https://github.com/nexu-io/open-design/tree/main/apps/daemon"
      },
      {
        "num": "04",
        "tag": "BYOK",
        "icon_svg": "<path d='M5 8h14v8H5z'/><path d='M9 12h6M12 9v6'/>",
        "title": "BYOK\nat every layer",
        "body": "OpenAI-compatible proxy. DeepSeek, Groq, OpenRouter, your self-hosted vLLM — paste a baseUrl + key, ship.",
        "href": "https://github.com/nexu-io/open-design"
      }
    ]
  },

  "labs": {
    "label": "Labs",
    "ix": "· Nº 04",
    "headline": [
      { "text": "A living archive of " },
      { "text": "experiments", "em": true },
      { "text": " in skills, decks, and machine-made form" },
      { "text": ".", "dot": true }
    ],
    "pills": [
      { "label": "All",       "count": "31", "active": true },
      { "label": "Prototype", "count": "27" },
      { "label": "Deck",      "count": "04" },
      { "label": "Mobile",    "count": "03" },
      { "label": "Office",    "count": "08" }
    ],
    "meta": {
      "ring": "05",
      "bold": "Ongoing experiments",
      "sub": "documenting ideas in flux<br/>building intelligence<br/>through making"
    },
    "cards": [
      { "badge": "Deck",     "num": "Nº 01", "year": "2026", "title": "Magazine Decks",     "body": "Editorial-grade slide decks with <code class='code-inline sm'>guizang-ppt</code>. Magazine layout, WebGL hero.", "href": "https://github.com/nexu-io/open-design/tree/main/skills/guizang-ppt" },
      { "badge": "Media",    "num": "Nº 02", "year": "2026", "title": "Synthetic Matter",   "body": "Gpt-image-2 + Seedance + HyperFrames. Image, video, audio — same chat surface as code.",                       "href": "https://github.com/nexu-io/open-design/tree/main/skills/hyperframes" },
      { "badge": "Loop",     "num": "Nº 03", "year": "2026", "title": "Prompt Choreography","body": "The interactive question form pops before a single pixel is improvised. 30s of radios beats 30min of redirects.","href": "https://github.com/nexu-io/open-design/tree/main/skills/design-brief" },
      { "badge": "Critique", "num": "Nº 04", "year": "2026", "title": "Visual Reasoning",   "body": "5-dim self-critique gates every artifact: philosophy · hierarchy · execution · specificity · restraint.",       "href": "https://github.com/nexu-io/open-design/tree/main/skills/critique" },
      { "badge": "Runtime",  "num": "Nº 05", "year": "2026", "title": "Soft Systems",       "body": "Sandboxed iframe preview. Streaming todos. Real-cwd filesystem. Adaptive loops between human and machine.",      "href": "https://github.com/nexu-io/open-design/tree/main/apps/daemon" }
    ],
    "progress": { "total": 8, "filled": 5 },
    "foot": "05 / 31 SKILLS &nbsp;·&nbsp; <a class='library-link' href='https://github.com/nexu-io/open-design/tree/main/skills' target='_blank' rel='noreferrer noopener' style='color:var(--coral);'>VIEW FULL LIBRARY →</a>"
  },

  "method": {
    "label": "Method",
    "ix": "· Nº 05",
    "headline": [
      { "text": "From " },
      { "text": "signals", "em": true },
      { "text": " to systems" },
      { "text": ".", "dot": true }
    ],
    "right": "Every stage is iterative, visual, and research-driven — composable files, not opaque prompts.",
    "steps": [
      { "num": "01", "title": "Detect",   "body": "The daemon scans your $PATH for 12 coding agents and auto-loads 31 skills + 72 systems on boot." },
      { "num": "02", "title": "Discover", "body": "Turn 1 is a question form — surface, audience, tone, scale, brand context. Locked in 30 seconds." },
      { "num": "03", "title": "Direct",   "body": "Pick one of 5 deterministic visual directions. Palette in OKLch, font stack, layout posture cues." },
      { "num": "04", "title": "Deliver",  "body": "The agent writes to disk, you preview in a sandboxed iframe, export HTML / PDF / PPTX / ZIP / Markdown." }
    ],
    "foot_left": "Skills inform everything. Files make it real.",
    "foot_right_bold": "github.com/nexu-io/open-design",
    "foot_right_rest": "Apache-2.0"
  },

  "work": {
    "label": "Selected work",
    "headline": [
      { "text": "Skills that turn briefs into " },
      { "text": "memorable", "em": true },
      { "text": " shippable " },
      { "text": "artifacts", "em": true },
      { "text": ".", "dot": true }
    ],
    "link_label": "View all 31 skills",
    "link_href": "https://github.com/nexu-io/open-design/tree/main/skills",
    "cards": [
      {
        "small_label": "Featured skill",
        "index": "01 / 31",
        "title": "guizang-ppt",
        "body": "Magazine-style web PPT for product launches and pitch decks. Bundled verbatim, original LICENSE preserved.",
        "year": "2026 · DECK",
        "tag": "DEFAULT"
      },
      {
        "small_label": "Companion system",
        "index": "04 / 72",
        "title": "kami",
        "body": "An editorial paper system. Warm parchment canvas, ink-blue accent, serif-led hierarchy — multilingual by design (EN · zh-CN · ja).",
        "year": "2026 · PAPER",
        "tag": "SYSTEM"
      }
    ]
  },

  "testimonial": {
    "label": "Collaborators",
    "ix": "· Nº 06",
    "quote": [
      { "text": "Open Design helped us turn vague " },
      { "text": "AI ideas", "em": true },
      { "text": " into a visual system that felt " },
      { "text": "sharp, believable,", "em": true },
      { "text": " and genuinely new." }
    ],
    "author": { "initial": "m", "name": "Mina Kovac", "title": "Creative Director · North Form" },
    "partners_text": "Standing on the shoulders of teams shipping open-source design culture.",
    "partners": [
      { "glyph_svg": "<path d='M5 24L20 6L35 24M12 18h16'/>",                              "name": "huashu-design", "role": "Philosophy", "href": "https://github.com/alchaincyf/huashu-design" },
      { "glyph_svg": "<path d='M8 24L20 6L24 22L36 4'/>",                                  "name": "guizang-ppt",   "role": "Decks",      "href": "https://github.com/op7418/guizang-ppt-skill" },
      { "glyph_svg": "<rect x='6' y='6' width='4' height='18'/><rect x='14' y='6' width='4' height='18'/><rect x='22' y='6' width='4' height='18'/><rect x='30' y='6' width='4' height='18'/>", "name": "multica-ai",   "role": "Daemon",     "href": "https://github.com/multica-ai/multica" },
      { "glyph_svg": "<circle cx='15' cy='15' r='9'/><path d='M15 6v18M6 15h18'/>",        "name": "open-codesign", "role": "UX",         "href": "https://github.com/OpenCoworkAI/open-codesign" },
      { "glyph_svg": "<path d='M5 8l9 7-9 7M20 24h18'/>",                                  "name": "Devin CLI",     "role": "Terminal",   "href": "https://devin.ai/terminal" },
      { "glyph_svg": "<rect x='4' y='5' width='22' height='18'/><rect x='14' y='9' width='22' height='18'/>", "name": "hyperframes",   "role": "Frames",     "href": "https://github.com/heygen-com/hyperframes" }
    ],
    "read_more_label": "Read more stories",
    "read_more_href": "https://github.com/nexu-io/open-design"
  },

  "cta": {
    "label": "Start a conversation",
    "ix": "· Nº 07",
    "headline": [
      { "text": "Let's build something " },
      { "text": "open", "em": true },
      { "text": " and " },
      { "text": "visually", "em": true },
      { "text": " unforgettable" },
      { "text": ".", "dot": true }
    ],
    "lead": "Star us on GitHub, drop into the issues, or run <code class='code-inline'>pnpm tools-dev</code> tonight. Three commands and the loop is yours.",
    "primary": { "label": "Star on GitHub", "href": "https://github.com/nexu-io/open-design" },
    "ribbon": "OPEN DESIGN &nbsp;·&nbsp; FIN."
  },

  "wire": {
    "title": "From the field",
    "cities": [
      { "name": "Berlin",        "coord": "52.52°N" },
      { "name": "Tokyo",         "coord": "35.68°N" },
      { "name": "Shanghai",      "coord": "31.23°N" },
      { "name": "Beijing",       "coord": "39.90°N" },
      { "name": "Taipei",        "coord": "25.03°N" },
      { "name": "Singapore",     "coord": "1.35°N"  },
      { "name": "Bangalore",     "coord": "12.97°N" },
      { "name": "Dubai",         "coord": "25.20°N" },
      { "name": "Lagos",         "coord": "6.52°N"  },
      { "name": "Nairobi",       "coord": "1.29°S"  },
      { "name": "Cape Town",     "coord": "33.92°S" },
      { "name": "Lisbon",        "coord": "38.72°N" },
      { "name": "Madrid",        "coord": "40.42°N" },
      { "name": "Paris",         "coord": "48.86°N" },
      { "name": "London",        "coord": "51.51°N" },
      { "name": "Amsterdam",     "coord": "52.37°N" },
      { "name": "Stockholm",     "coord": "59.33°N" },
      { "name": "Toronto",       "coord": "43.65°N" },
      { "name": "New York",      "coord": "40.71°N" },
      { "name": "San Francisco", "coord": "37.77°N" },
      { "name": "Mexico City",   "coord": "19.43°N" },
      { "name": "São Paulo",     "coord": "23.55°S" },
      { "name": "Sydney",        "coord": "33.87°S" }
    ],
    "contributors": [
      { "handle": "tw93",         "role": "kami",     "href": "https://github.com/tw93" },
      { "handle": "op7418",       "role": "guizang",  "href": "https://github.com/op7418" },
      { "handle": "alchaincyf",   "role": "huashu",   "href": "https://github.com/alchaincyf" },
      { "handle": "multica-ai",   "role": "daemon",   "href": "https://github.com/multica-ai" },
      { "handle": "OpenCoworkAI", "role": "codesign", "href": "https://github.com/OpenCoworkAI" },
      { "handle": "nexu-io",      "role": "studio",   "href": "https://github.com/nexu-io" },
      { "handle": "you",          "role": "be next",  "href": "https://github.com/nexu-io/open-design/graphs/contributors" }
    ]
  },

  "footer": {
    "brand_description": "The open-source alternative to Claude Design. Built on the shoulders of <a class='inline-link' href='https://github.com/alchaincyf/huashu-design' target='_blank' rel='noreferrer noopener'>huashu-design</a>, <a class='inline-link' href='https://github.com/op7418/guizang-ppt-skill' target='_blank' rel='noreferrer noopener'>guizang-ppt</a>, <a class='inline-link' href='https://github.com/multica-ai/multica' target='_blank' rel='noreferrer noopener'>multica-ai</a>, and <a class='inline-link' href='https://github.com/OpenCoworkAI/open-codesign' target='_blank' rel='noreferrer noopener'>open-codesign</a>.",
    "brand_cta": {
      "label": "Download desktop",
      "href": "https://github.com/nexu-io/open-design/releases",
      "meta": "macOS · v0.2.0"
    },
    "columns": [
      { "title": "Studio",  "links": [
        { "label": "Capabilities", "href": "#agents" },
        { "label": "Labs",         "href": "#labs" },
        { "label": "Method",       "href": "https://github.com/nexu-io/open-design/tree/main/apps/daemon" },
        { "label": "Manifesto",    "href": "https://github.com/nexu-io/open-design" }
      ]},
      { "title": "Library", "links": [
        { "label": "31 Skills",    "href": "https://github.com/nexu-io/open-design/tree/main/skills" },
        { "label": "72 Systems",   "href": "https://github.com/nexu-io/open-design/tree/main/design-systems" },
        { "label": "5 Directions", "href": "https://github.com/nexu-io/open-design/tree/main/design-systems" },
        { "label": "5 Frames",     "href": "https://github.com/nexu-io/open-design/tree/main/skills/hyperframes" }
      ]},
      { "title": "Connect", "links": [
        { "label": "GitHub",       "href": "https://github.com/nexu-io/open-design" },
        { "label": "Issues",       "href": "https://github.com/nexu-io/open-design/issues" },
        { "label": "Contributors", "href": "https://github.com/nexu-io/open-design/graphs/contributors" },
        { "label": "Releases",     "href": "https://github.com/nexu-io/open-design/releases" }
      ]},
      { "title": "Docs",    "links": [
        { "label": "Quickstart",     "href": "https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md" },
        { "label": "Architecture",   "href": "https://github.com/nexu-io/open-design/blob/main/docs/architecture.md" },
        { "label": "Skill Protocol", "href": "https://github.com/nexu-io/open-design/blob/main/docs/skills-protocol.md" },
        { "label": "Roadmap",        "href": "https://github.com/nexu-io/open-design/blob/main/docs/roadmap.md" }
      ]}
    ],
    "mega": [
      { "text": "Open " },
      { "text": "Design", "em": true },
      { "text": "." }
    ]
  },

  "imagery": {
    "strategy": "bring-your-own",
    "assets_path": "./assets/",
    "provider": "fal"
  }
}