open-design/skills/editorial-collage-deck/inputs.example.json
Tom Huang 6c2a8ba09f
feat(editorial-collage): introduce Atelier Zero style landing page as… (#366)
* feat(editorial-collage): introduce Atelier Zero style landing page assets and documentation

- Added new design system for Atelier Zero, including a detailed `DESIGN.md` file.
- Created an `editorial-collage` skill with associated assets for a magazine-grade landing page.
- Included example HTML and image assets for various sections (hero, about, capabilities, etc.).
- Updated README files to guide usage and customization of the new skill and design system.
- Introduced a new image generation prompt pack for consistent visual style across the landing page.

* fix(i18n): cover atelier-zero design system and editorial-collage skill in German content

Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)

* fix(editorial-collage): align manifest with shipped assets and address PR review

- Update image-manifest.json widths/heights/ratios to match the actual PNGs
  on disk: hero/about/cap/testimonial/cta = 1024x1024 (1:1), method-1..4 =
  816x816 (1:1), lab-1..5 and work-1..2 = 768x1024 (3:4). Mirror the new
  dimensions in imagegen-prompts.md headings and in README.md.
- Mark testimonial.png as rekey_on_brand_change so the manifest agrees
  with SKILL.md's "regenerate at minimum testimonial.png" guidance, and
  add work-1/work-2 to the rekey list in SKILL.md and README.md.
- Add a Hero (I.) sec-rule and renumber every following section II..VIII
  in example.html so the eight sections walk sequentially I -> VIII and
  the page-of-008 counter starts at 001.
- Delete editorial-artifact-system/ (16 duplicate PNGs + index.html +
  skills.md draft) — the canonical version is skills/editorial-collage/
  and the duplicate had no consumer references.
- DESIGN.md: spell out which dimensions of each magazine reference
  (Monocle/Apartamento/IDEA), document the rationale for single-accent
  vs multi-accent, and extend the anti-pattern list with AI-image-gen
  artifacts the system explicitly rejects.
- SKILL.md: add italic_words validation guidance (trim, cap at 4,
  verb->noun rewrite, punctuation strip) and replace the broken-image
  fallback with an inline SVG placeholder sized to the slot's
  manifest aspect ratio.

Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)

* fix(daemon): serve skill example assets via stable API route

Skill example HTML such as `skills/editorial-collage/example.html`
references shipped images via `./assets/*.png`. The web app loads the
example into a sandboxed iframe via `srcdoc`, where relative URLs
resolve against `about:srcdoc` and the PNGs render as broken images in
the Examples preview.

Add a `GET /api/skills/:id/assets/*` route that serves files under the
skill's `assets/` directory with path-traversal guards, and rewrite
`src='./assets/<file>'` / `href='./assets/<file>'` in the example
response to point at that route. The disk preview keeps working
because the on-disk files are unchanged.

Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)

* feat(landing-page): add new static Next.js 16 site for Open Design marketing

- Introduced a new landing page application using Next.js 16, featuring a static export setup.
- Added essential files including `package.json`, `next.config.ts`, and TypeScript configuration.
- Implemented global styles in `globals.css` to match the Atelier Zero design system.
- Created a detailed `AGENTS.md` for module-level boundaries and purpose.
- Included various image assets for the landing page, ensuring a visually cohesive experience.
- Established a root layout and main page structure to support the marketing content.

* style(landing-page): enhance topbar layout and improve responsiveness

- Added nowrap styling to topbar elements to prevent text overflow.
- Introduced media query to hide mid text in the topbar for screen widths between 1200px and 1280px.
- Updated layout.tsx to suppress hydration warnings for better rendering consistency.
- Removed redundant "Compiled by Open Design" text from the page component.

* feat(landing-page): implement scroll-reveal animations for enhanced user experience

- Added a new `RevealRoot` component to manage scroll-triggered reveal animations.
- Updated `globals.css` with styles for elements using the `data-reveal` attribute, including opacity, translation, and scaling effects.
- Modified `layout.tsx` to include the `RevealRoot` component for managing animations.
- Enhanced `page.tsx` by adding `data-reveal` attributes to various elements for staggered reveal effects.
- Implemented reduced motion support to ensure accessibility for users with motion sensitivity.

* fix(landing-page): update import paths and enhance link styles

- Changed the import path in `next-env.d.ts` to reference the correct routes type definition.
- Enhanced `globals.css` with new styles for topbar links, work cards, and partner elements, improving hover effects and transitions.
- Updated `page.tsx` to include canonical project URLs and made various links point to these URLs for better navigation and accessibility.

* feat(landing-page): implement headroom-style sticky header with live GitHub star count

- Introduced a new `Header` component to manage sticky navigation behavior on scroll, enhancing user experience.
- Updated `globals.css` to style the sticky header, including transitions and visibility toggling based on scroll direction.
- Modified `page.tsx` to replace the static header with the new `Header` component, which fetches and displays the live GitHub star count.
- Ensured accessibility by providing a fallback for users who prefer reduced motion.

* feat(landing-page): enhance editorial landing page with global ticker and new styles

- Updated `next-env.d.ts` to reference the correct routes type definition for development.
- Enhanced `globals.css` with new styles for the global ticker, including responsive design and improved overflow handling.
- Introduced a new `WIRE_CITIES` and `WIRE_CONTRIBS` data structure in `page.tsx` to display a counter-scrolling marquee of cities and contributors.
- Added a ghost button style for the navigation call-to-action in the header.
- Updated various sections in `page.tsx` to integrate the new ticker and improve overall layout and accessibility.

* refactor(landing-page): update paper texture overlay and remove multica-ai link

- Enhanced comments in `globals.css` to clarify the purpose and behavior of the paper texture overlay.
- Adjusted z-index of the overlay to ensure proper layering with other elements.
- Removed the `multica-ai` partner link from `page.tsx` to streamline the partner section.

* feat(landing-page): implement dynamic contributor marquee with GitHub integration

- Added a new `Wire` component to display a counter-scrolling marquee of cities and contributors.
- The contributor list is fetched live from the GitHub API, ensuring up-to-date information.
- Updated `page.tsx` to integrate the `Wire` component, replacing the static contributor list with dynamic content.
- Enhanced comments for clarity regarding the functionality and purpose of the global wire.

* fix(i18n): add German display copy for editorial-collage-deck skill

The Validate workspace test asserts that GERMAN_CONTENT_IDS.skills covers
every curated skill on disk; the new editorial-collage-deck skill was
missing from DE_SKILL_COPY, causing src/i18n/content.test.ts to fail.

Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)

* feat(landing-page): migrate marketing site to Astro

* perf(landing-page): remove React client runtime

* perf(landing-page): serve images from Cloudflare resizing

* fix(pr): address landing page review feedback

---------

Co-authored-by: mrcfps <mrc@powerformer.com>
2026-05-04 13:39:58 +08:00

210 lines
7.5 KiB
JSON

{
"$schema": "./schema.ts",
"_doc": "Worked example — Open Design pitch deck. 11 slides covering cover, two sections, four content slides, one stats, one quote, one CTA, one end. Reuses brand identity and assets from the sister editorial-collage skill. Run `npx tsx scripts/compose.ts inputs.example.json example.html` to build.",
"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 pitch deck — Vol. 01.",
"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",
"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": "", "left": "" },
"languages": ["EN"],
"status": "Live · v0.2.0"
},
"deck_title": "Open Design · Vol. 01 / Issue Nº 26",
"slides": [
{
"kind": "cover",
"eyebrow": "Open-source design studio · Nº 01",
"title": [
{ "text": "Designing " },
{ "text": "intelligence", "em": true },
{ "text": " with skills, " },
{ "text": "taste,", "em": true },
{ "text": " and " },
{ "text": "code", "em": true },
{ "text": ".", "dot": true }
],
"subtitle": "The open-source alternative to Anthropic's Claude Design.",
"lead": "12 coding agents drive 31 composable skills and 72 brand-grade design systems. Local-first, web-deployable, BYOK at every layer.",
"image_slot": "hero",
"meta": "Berlin · MMXXVI · 52.5200° N · 13.4050° E"
},
{
"kind": "section",
"roman": "I.",
"title": [
{ "text": "Why " },
{ "text": "another", "em": true },
{ "text": " design tool" },
{ "text": "?", "dot": true }
],
"lead": "Because the strongest agents already live on your laptop — and they deserve a real workflow."
},
{
"kind": "content",
"layout": "right",
"eyebrow": "About the studio · Nº 02",
"title": [
{ "text": "We treat " },
{ "text": "your agent", "em": true },
{ "text": " as a creative " },
{ "text": "collaborator", "em": true },
{ "text": ".", "dot": true }
],
"body": "We don't ship one — we wire whichever you trust into a skill-driven design workflow that runs locally with <code>pnpm tools-dev</code>, deploys to Vercel, and stays BYOK at every layer.",
"bullets": [
"Files, not opaque prompts — every skill is a folder of Markdown.",
"Deterministic visual directions, not random generation.",
"Sandboxed iframe preview, real cwd, exportable artifacts."
],
"image_slot": "about"
},
{
"kind": "content",
"layout": "left",
"eyebrow": "Capabilities · Nº 03",
"title": [
{ "text": "Skills, systems, surfaces — " },
{ "text": "for creative", "em": true },
{ "text": " intelligence" },
{ "text": ".", "dot": true }
],
"body": "Four composable surfaces, one feedback loop. Skills supply behavior. Systems supply taste. Adapters bridge agents. BYOK respects your wallet.",
"bullets": [
"31 file-based SKILL.md bundles — drop in, restart, appears.",
"72 portable DESIGN.md systems — Linear, Vercel, Stripe, Apple…",
"12 agent adapters — Claude · Codex · Gemini · Cursor · …",
"OpenAI-compatible proxy — paste a baseUrl + key, ship."
],
"image_slot": "capabilities"
},
{
"kind": "stats",
"eyebrow": "By the numbers · Nº 04",
"title": [
{ "text": "Composable, " },
{ "text": "shippable,", "em": true },
{ "text": " portable" },
{ "text": ".", "dot": true }
],
"stats": [
{ "value": "31", "label": "Skills", "sub": "file-based, shippable today" },
{ "value": "72", "label": "Systems", "sub": "design tokens you already trust" },
{ "value": "12", "label": "Agents", "sub": "auto-detected on your $PATH" },
{ "value": "3", "label": "Commands","sub": "from clone to first artifact" }
],
"caption": "Open Design v0.2.0 · Apache-2.0 · MMXXVI"
},
{
"kind": "section",
"roman": "II.",
"title": [
{ "text": "How it " },
{ "text": "feels", "em": true },
{ "text": " to use it" },
{ "text": ".", "dot": true }
]
},
{
"kind": "content",
"layout": "right",
"eyebrow": "Method · Nº 05",
"title": [
{ "text": "From " },
{ "text": "signals", "em": true },
{ "text": " to systems" },
{ "text": ".", "dot": true }
],
"body": "Every project moves through four iterative stages. The agent picks each stage's tools deterministically; you stay in control.",
"bullets": [
"01 · Detect — daemon scans $PATH, auto-loads skills + systems.",
"02 · Discover — 30s question form locks brand · audience · scale.",
"03 · Direct — pick one of 5 visual directions in OKLch + type stack.",
"04 · Deliver — write to disk, preview in sandbox, export anywhere."
],
"image_slot": "method-1"
},
{
"kind": "content",
"layout": "left",
"eyebrow": "Selected work · Nº 06",
"title": [
{ "text": "Skills that turn briefs into " },
{ "text": "memorable", "em": true },
{ "text": " artifacts" },
{ "text": ".", "dot": true }
],
"body": "From editorial decks to consumer dashboards — the same loop, different surface. Every output is a real file you can hand to a client tomorrow.",
"image_slot": "work-1"
},
{
"kind": "quote",
"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" },
"image_slot": "testimonial"
},
{
"kind": "cta",
"eyebrow": "Start a conversation · Nº 07",
"title": [
{ "text": "Let's build something " },
{ "text": "open", "em": true },
{ "text": " and " },
{ "text": "visually", "em": true },
{ "text": " unforgettable" },
{ "text": ".", "dot": true }
],
"body": "Star us on GitHub, drop into the issues, or run pnpm tools-dev tonight. Three commands and the loop is yours.",
"primary": { "label": "Star on GitHub", "href": "https://github.com/nexu-io/open-design" },
"secondary": { "label": "Open an issue", "href": "https://github.com/nexu-io/open-design/issues" }
},
{
"kind": "end",
"mega": [
{ "text": "Open " },
{ "text": "Design", "em": true },
{ "text": "." }
],
"footer": "Apache-2.0 · MMXXVI · Berlin · 52.5200° N · 13.4050° E"
}
],
"imagery": {
"strategy": "bring-your-own",
"assets_path": "../editorial-collage/assets/",
"provider": "fal"
}
}