# Generate Design

> Generate an AI-readable DESIGN.md design-system document and matching HTML preview pages from four input types: project code paths, feature screenshots, reference website URLs, and product ideas. Use when Codex needs to extract or invent a reusable visual language, preserve a project's UI style, document colors/typography/layout/components in the same structured format as an example DESIGN.md, or…

- **Type:** Skill
- **Install:** `agentstack add skill-lingkejia-agent-skills-generate-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [lingkejia](https://agentstack.voostack.com/s/lingkejia)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [lingkejia](https://github.com/lingkejia)
- **Source:** https://github.com/lingkejia/agent-skills/tree/main/skills/generate-design

## Install

```sh
agentstack add skill-lingkejia-agent-skills-generate-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Generate Design

## Core Workflow

1. Identify the input mode: project code path, screenshots, reference website URL, product idea, or a combination.
2. Gather evidence before writing:
   - For code paths, inspect existing UI files, stylesheets, component libraries, design config, screenshots if available, and package dependencies.
   - For screenshots, visually extract palette, typography, layout rhythm, component shapes, density, and interaction states.
   - For URLs, browse the site and capture enough representative pages or states. Use screenshots and source styles when available.
   - For product ideas, infer a fitting design direction from the audience, domain, workflow density, and brand personality.
3. Read `references/design-document-format.md` before drafting `DESIGN.md`.
4. Read `references/input-playbooks.md` for the relevant input mode.
5. Write `DESIGN.md` in the target project or requested output folder. Keep the format aligned with the reference structure: YAML token block first, then Markdown guidance sections.
6. Generate `preview.html` and `preview-dark.html` from the document:

```bash
python3 scripts/generate_preview.py path/to/DESIGN.md --out-dir path/to/output
```

7. Open or inspect the previews when possible. Check that colors render, typography samples are legible, cards/buttons/forms are visible, and mobile CSS does not overlap.
8. Revise `DESIGN.md` and regenerate previews until the document and visual catalog agree.

## Output Contract

Produce these files unless the user asks for different names:

- `DESIGN.md`: the reusable design-system document.
- `preview.html`: light preview page generated from the design system.
- `preview-dark.html`: dark preview page generated from the same tokens.

When the user supplies an existing example `DESIGN.md`, match its section order and level of detail. Do not copy brand-specific content from the example unless it truly applies to the new target.

## Evidence Rules

- Prefer observed facts over invention for code paths, screenshots, and URLs.
- Make explicit in `Known Gaps` when a token or component was inferred.
- Use token references such as `{colors.primary}` and `{typography.body-md}` inside component definitions and prose.
- Keep component names semantic and reusable: `button-primary`, `top-nav`, `feature-card`, `data-table`, `empty-state`, `footer`.
- Document default, active/pressed, disabled, focused, success, warning, and error states when visible or necessary.
- Preserve the user's language in prose sections when the user is working in that language.

## Resources

- `references/design-document-format.md`: required schema and section order for `DESIGN.md`.
- `references/input-playbooks.md`: extraction/invention guidance for the four supported user input types.
- `scripts/generate_preview.py`: deterministic static preview generator for light and dark HTML catalogs.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [lingkejia](https://github.com/lingkejia)
- **Source:** [lingkejia/agent-skills](https://github.com/lingkejia/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-lingkejia-agent-skills-generate-design
- Seller: https://agentstack.voostack.com/s/lingkejia
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.