New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Open Design Landing

by sanqiufong in sanqiufong/slides-from-anything

Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own…

Apache-2.0Auto-check passedFrontend & Design

Install Open Design Landing

skills CLI
$ npx skills add sanqiufong/slides-from-anything --skill open-design-landing -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sanqiufong/slides-from-anything open-design-landing --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sanqiufong/slides-from-anything.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/open-design-landing .claude/skills/open-design-landing && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
open-design-landing
GitHub stars
132
Used in
1 other repo
Token cost
~3.3k tokens
SKILL.md length
838 words
Files
28 (incl. scripts, assets)
Skills in repo
48
Repo updated
First seen
Licence
Apache-2.0

At a glance

Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own…

  • Works in 4 steps: Gather brand inputs → Decide the image strategy → Compose the artifact → …
  • Tasks that involve Landing pages
  • SKILL.md covers What you get, Workflow contract, Self-check before delivering and Files in this skill, plus 2 more sections
  • Calls npx and pnpm; needs FAL_KEY

What it does

Open Design Landing is an agent skill from sanqiufong/slides-from-anything. Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed inputs.json from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in apps/landing-page/. Drop-in scroll-reveal motion and a…

Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 28 other files, including scripts and assets (for example `README.md`, `assets/image-manifest.json` and `assets/imagegen-prompts.md`).

It sits in Frontend & Design, covering Landing pages, Static sites and blogs and Image generation. It works with Astro. The repository describes itself as: Turn anything into slides. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Landing pages
  • Tasks that involve Static sites and blogs
  • Tasks that involve Image generation

Example prompts

  • “/open-design-landing”

Requirements

  • Node.js
  • A credential in FAL_KEY

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Gather brand inputs
  2. Decide the image strategy
  3. Compose the artifact
  4. (Optional) Mirror the deployable Astro site

What it can do on your machine

Read from SKILL.md and the folder at commit 65da4ac. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • npx
    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • FAL_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Open Design Landing loads about 3.3k tokens when it runs. Until then it costs about 146 tokens; SKILL.md has 838 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~146
When it runs · the whole SKILL.md, loaded when a task matches
~3.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from sanqiufong/slides-from-anything at commit 65da4ac, republished under its Apache-2.0 licence (© sanqiufong). 838 words, ~3,336 tokens.

Download SKILL.mdSave it as .claude/skills/open-design-landing/SKILL.md (or your agent's skills folder). This skill also uses 27 other files; get the full folder from GitHub.
name
open-design-landing
description
Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in `apps/landing-page/`. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.
triggers
- landing page - 落地页 - editorial site - magazine layout - hero collage - atelier zero - open design landing
od
category: brand-page surface: web scenario: marketing featured: 1 audience: founders, design studios, OSS maintainers tone: editorial, restrained, premium…
inputs
- id: brand label: Brand identity description: Name, mark, tagline, location, languages, license, repo url. schema_path: ./schema.ts#BrandBlock - id: nav…
parameters
output_format: type: enum values: [standalone-html, nextjs-app, both] default: standalone-html description: > `standalone-html` writes one self-contained…
outputs
- path: <out>/index.html when: output_format in [standalone-html, both] description: Self-contained HTML with Atelier Zero CSS inlined. - path…
capabilities_required
- file-write - http-fetch # only when image_strategy=generate - node-runtime # tsx or compatible
example_prompt
Build me an editorial landing page for "Lumen Field", an indie studio shipping a soundscape app for focus. Coral accent, Berlin coordinates, mention the iOS…

open-design-landing

Build a single-page editorial landing site (or a slide deck — see the sibling open-design-landing-deck skill) in the Atelier Zero design system: warm-paper background, Inter Tight + Playfair Display, italic serif emphasis spans, dotted hairline rules, coral terminating dots, scroll-reveal motion, and 16 surreal collage plates.

This is the canonical Open Design marketing-page recipe — the example output is the very page you see at open-design.

The skill is fully parameterized. The agent fills one typed inputs.json from the user's brief; the composer turns that JSON + the canonical styles.css into a deployable artifact.

text
inputs.json + styles.css                       16 image slots
        │                                            │
        └──────────► scripts/compose.ts ◄────────────┘
                            │
                            ▼
              <out>/index.html  (self-contained)
              <out>/assets/      (PNG or SVG)

What you get

A single HTML file with all of:

  • Editorial topbar (volume / issue / language strip), Headroom-style sticky nav with live GitHub star count.
  • 8 numbered Roman-numeral sections with paper-textured background: hero (with 3 stat rings + 4-step index), about, capabilities (4 cards), labs (5 cards + filter pills + progress bar), method (4 steps with thumbnails), selected work (dark slab + 2 tilted cards), testimonial (pull quote + 5 partner glyphs), CTA (ribbon + email pill).
  • Footer with 4 link columns + huge italic-serif kicker word.
  • Scroll-reveal motion on every section (IntersectionObserver, respects prefers-reduced-motion).
  • Fully responsive at 1280 / 1080 / 880 / 560 breakpoints.

Workflow contract

Run these four steps in order. The agent should complete each step before moving on, and prefer asking the user a focused question over inventing copy.

1. Gather brand inputs

Use AskQuestion (or the equivalent in your UI) to collect the brand brief in chunks; do not dump the entire schema.ts on the user. Map their answers into inputs.json matching the typed shape.

The eight question groups, in order:

GroupSchema fieldsMin answersNotes
1brand.{name,mark,tagline,description,location}5Mark = single glyph (Ø, ▲, ★…)
2brand.{license,version,year,primary_url,contact_email}4URL is required; license defaults Apache-2.0
3nav[] (up to 5)3Optional count badges
4hero.{label,headline,lead,primary,secondary,stats}AllHeadline as MixedText (sans+em+dot)
5about + capabilities.cards[4]All4 cards × {num,tag,title,body}
6labs.cards[5] + method.steps[4]AllBoth grids fixed-arity
7work.cards[2] + testimonialAll5 partner glyphs as inline SVG path data
8cta + footer.{columns[4],mega}AllMega kicker is a MixedText like the headlines

Open inputs.example.json for a complete worked example (Open Design itself).

2. Decide the image strategy
StrategyWhen to chooseCost / latency
placeholderFirst pass. Demo. Slide internal. No image budget yet.$0, <1s
generateFinal delivery. Brand wants original collages.~$0.40, ~6 min
bring-your-ownUser has art direction PNGs. Drop them at assets_path.$0, 0s

Set inputs.imagery.strategy accordingly.

placeholder — frame mode
bash
npx tsx scripts/placeholder.ts <out>/assets/

Writes 16 .svg files (with .png aliases for compatibility) into <out>/assets/. Each placeholder shows the slot id, ratio, pixel dimensions, and the prompt hint from image-manifest.json. The composer's <img src='./assets/hero.png'> etc. just work.

generate — gpt-image-2 mode
bash
FAL_KEY=... npx tsx scripts/imagegen.ts <inputs.json> --out=<out>/assets/

Calls fal.ai's openai/gpt-image-2 synchronous endpoint per slot. Composes prompts as: style anchor (paper-collage editorial system)

  • brand variables (name / nav / headline / italic emphasis pulled from inputs.json) + per-slot composition (e.g. cropped plaster head + tree growing through arch). Skips slots whose target file already exists; pass --force to re-render.

Without FAL_KEY, the script prints the prompts so the operator can route them through the /gpt-image-fal slash-command skill manually.

bring-your-own

Drop 16 PNGs matching assets/image-manifest.json filenames at inputs.imagery.assets_path. Done.

Show full SKILL.md (332 more words)Show less
3. Compose the artifact
bash
npx tsx scripts/compose.ts <inputs.json> <out>/index.html

The composer reads inputs.json and ../styles.css, then writes one self-contained HTML file. The page includes:

  • The full Atelier Zero stylesheet, inlined.
  • All section markup with data-reveal attributes for staggered scroll motion.
  • Inline IntersectionObserver script (mirrors apps/landing-page/app/_components/reveal-root.tsx).
  • Inline Headroom nav script (mirrors header.tsx).
  • Inline GitHub star-count fetcher (auto-detects from brand.primary_url).
4. (Optional) Mirror the deployable Astro site

For deployable production output, fork the apps/landing-page/ package: copy it into your workspace, align app/page.tsx with content from your inputs.json, and copy your <out>/assets/*.png into the paths expected by app/image-assets.ts / R2 URLs. Build with pnpm --filter @open-design/landing-page build for a static out/ export ready for any CDN.

A future iteration may bundle a composer that emits the full apps/landing-page/ tree from inputs.json in one command. Until then, fork-and-edit is the supported path.

Self-check before delivering

Before marking done, the agent must verify:

  • <out>/index.html opens in a browser without console errors.
  • All 16 image slots load (no 404s in DevTools network tab).
  • Headline italic emphasis spans render in Playfair (not sans).
  • Coral terminating dots appear at every display h1/h2 end.
  • Scroll from top to bottom; every section animates in once.
  • Resize to 880px and 560px; no horizontal scroll, no overlap.
  • prefers-reduced-motion: reduce (DevTools → Rendering) disables transitions cleanly.
  • Lighthouse: contrast AA, font-display swap, no layout shift on the hero (CLS < 0.05).

Files in this skill

text
skills/open-design-landing/
├── SKILL.md                 # this contract
├── README.md                # quick-start
├── schema.ts                # typed inputs (single source of truth)
├── styles.css               # Atelier Zero stylesheet (single source of truth)
├── inputs.example.json      # Open Design as the worked example
├── example.html             # canonical rendering (regenerated from inputs.example.json)
├── scripts/
│   ├── compose.ts           # inputs.json + styles.css → index.html
│   ├── imagegen.ts          # gpt-image-2 wrapper (fal.ai)
│   └── placeholder.ts       # SVG paper-textured frames
└── assets/
    ├── *.png                # 16 collage plates (Open Design instance)
    ├── image-manifest.json  # slot → file/dimensions/prompt mapping
    └── imagegen-prompts.md  # human-readable prompt pack

Boundaries

  • Do not invent new colors or typefaces. Tokens live in design-systems/atelier-zero/DESIGN.md; extend the design system before adding a new ramp here.
  • Do not drop data-reveal attributes from generated markup. Without them the page goes static and feels dead.
  • Do not wrap the composed HTML in a framework that injects its own stylesheet ordering — Atelier Zero relies on stylesheet-order cascade for paper texture and z-index of side rails.
  • Do not add a separate stylesheet file for the Astro landing-page fork; copy styles.css verbatim into app/globals.css so visual parity stays one-to-one.

See also

© sanqiufong, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 27 other files (scripts, assets) in skills/open-design-landing of sanqiufong/slides-from-anything.

  • SKILL.md
  • README.md
  • assets/about.png
  • assets/capabilities.png
  • assets/cta.png
  • assets/hero.png
  • assets/image-manifest.json
  • assets/imagegen-prompts.md
  • assets/lab-1.png
  • assets/lab-2.png
  • assets/lab-3.png
  • assets/lab-4.png
  • assets/lab-5.png
  • assets/method-1.png
  • assets/method-2.png
  • assets/method-3.png
  • assets/method-4.png
  • assets/testimonial.png
  • assets/work-1.png
  • assets/work-2.png
  • … and 8 more

Open the folder on GitHubat commit 65da4ac

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in sanqiufong/slides-from-anything, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Open Design Landing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Open Design Landing compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Open Design Landing this skillsanqiufong/slides-from-anything1321 repos~3.3kAutomated safety check: PassApache-2.0
Kill AI Slopyetone/kill-ai-slop1.3k—~1.4kAutomated safety check: PassApache-2.0
System Bridge Landing Content Updatestimmo001/system-bridge357—~313Automated safety check: PassApache-2.0
Astroericrisco/rsc-harness180—~3.3kAutomated safety check: PassMIT
Static Sitesbionic-gpt/bionic-gpt2.4k—~920Automated safety check: PassApache-2.0
Auteuragiwhitelist/auteur1k—~5kAutomated safety check: PassMIT

Similar skills

  • Kill AI Slop

    yetone/kill-ai-slop

    Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.

    1.3k GitHub stars~1.4k tokensUpdated 26 days ago
    Frontend & DesignAuto-check passed

  • System Bridge Landing Content Updates

    timmo001/system-bridge

    Update the System Bridge marketing landing page in the Astro + Starlight docs site.

    357 GitHub stars~313 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Astro

    ericrisco/rsc-harness

    A skill your agent uses when building a content-driven or marketing site with Astro 6: static-first pages, islands and partial hydration, content collections, server islands, per-route on-demand…

    180 GitHub stars~3.3k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Static Sites

    bionic-gpt/bionic-gpt

    Create or modify Bionic's generated marketing site, documentation, blog, course pages, and static assets.

    2.4k GitHub stars~920 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Auteur

    agiwhitelist/auteur

    Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…

    1k GitHub stars~5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Motion Dev Animations

    199-biotechnologies/motion-dev-animations-skill

    Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.

    133 GitHub starsUsed in 1 repo~2.8k tokens
    Frontend & DesignAuto-check: notes

More from sanqiufong/slides-from-anything

All 48 skills in this repo

  • PPTX HTML Fidelity Audit

    sanqiufong/slides-from-anything

    Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with…

    132 GitHub starsUsed in 1 repo~3.5k tokens
    Auto-check passed

  • Mobile App

    sanqiufong/slides-from-anything

    A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page.

    132 GitHub starsUsed in 1 repo~942 tokens
    Auto-check passed

  • Replit Deck

    sanqiufong/slides-from-anything

    Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery.

    132 GitHub starsUsed in 1 repo~2.9k tokens
    Auto-check passed

  • Live Artifact

    sanqiufong/slides-from-anything

    Create refreshable, auditable Open Design artifacts backed by connector or local data.

    132 GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Web Prototype

    sanqiufong/slides-from-anything

    General-purpose desktop web prototype. An agent skill from sanqiufong/slides-from-anything.

    132 GitHub starsUsed in 3 repos~1k tokens
    Auto-check passed

  • Tweaks

    sanqiufong/slides-from-anything

    Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to…

    132 GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check passed

Works with

Categories

Questions about Open Design Landing

What does Open Design Landing do?

Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own…. Open Design Landing is an agent skill from sanqiufong/slides-from-anything. Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface.

When should I use Open Design Landing?

Open Design Landing fits situations like: tasks that involve Landing pages; tasks that involve Static sites and blogs; tasks that involve Image generation.

How do I install Open Design Landing in Claude Code?

Run `npx skills add sanqiufong/slides-from-anything --skill open-design-landing -a claude-code`. Or copy the skill folder (skills/open-design-landing in sanqiufong/slides-from-anything) into .claude/skills/open-design-landing in your project. Claude Code loads it when a task matches its description.

How do I install Open Design Landing in Codex?

Run `npx skills add sanqiufong/slides-from-anything --skill open-design-landing -a codex`. Or copy the skill folder (skills/open-design-landing in sanqiufong/slides-from-anything) into .agents/skills/open-design-landing in your project. Codex loads it when a task matches its description.

Can I use Open Design Landing in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sanqiufong/slides-from-anything --skill open-design-landing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/open-design-landing, .gemini/skills/open-design-landing, .github/skills/open-design-landing and .opencode/skills/open-design-landing in your project.

What does Open Design Landing need to run?

Going by SKILL.md and its folder, Open Design Landing needs the command-line tools its instructions call (npx and pnpm) and credentials named FAL_KEY. Our summary lists: Node.js; A credential in FAL_KEY.

Does Open Design Landing access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Open Design Landing safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Open Design Landing use?

Open Design Landing is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Open Design Landing use?

About 3.3k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Open Design Landing?

Skills that share tags, products or a category with Open Design Landing: Kill AI Slop (yetone/kill-ai-slop, 1.3k stars), System Bridge Landing Content Updates (timmo001/system-bridge, 357 stars), Astro (ericrisco/rsc-harness, 180 stars) and Static Sites (bionic-gpt/bionic-gpt, 2.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Open Design Landing?

sanqiufong (a GitHub user) maintains it in sanqiufong/slides-from-anything, which has 132 GitHub stars. The repository holds 48 skills in this directory. The repository was last updated on October 10, 2026.

Source: sanqiufong/slides-from-anything on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.