Fast Preset - AI Prototyping Skills

On some projects, I want to move away from Figma and start directly in code. It's just faster to iterate, share something interactive, and validate decisions when the prototype is real.

Fast Preset is the toolkit I built for that - prototyping skills for AI coding agents in an Astro, Tailwind CSS, and DaisyUI workflow, with JSON files as the data layer.

Feed it product documentation, out comes a working coded prototype that you can tweak. It's for designers who want real coded prototypes, not static mockups.

Works with Claude Code (or VS Code with the Claude Code extension - my setup), Cursor, Codex, Antigravity, Kiro, OpenCode, and other coding agents.

Design Tech Stack: latest stable Astro, Tailwind CSS, DaisyUI, and @lucide/astro. Use DaisyUI for consistency. After the base is in place, customize its theme and component composition.

Get Started

Install with skills.sh, works across every supported agent:

npx skills add tibichi/fast-preset

Drops into your active project (or pass -g for global).

Use skills in two ways:

• type the skill name directly (e.g. /fast-brief), or
• describe what you need in plain English ("turn these docs into a prototype brief")

Example:

/fast-astro Project Name

Use /fast-prototype to build this from the docs and src/data JSON.

Alternative: Claude Code plugin marketplace

If you prefer Claude Code's native plugin UI (/plugin Discover tab, versioned updates, install scopes):

/plugin marketplace add tibichi/fast-preset
/plugin install fast-preset@tibichi

This path namespaces the skills as /fast-preset:fast-astro, /fast-preset:fast-brief, etc. - longer to type, but isolated from any same-name skill in your environment.

Prototyping Skills

Five skills, meant to run top-to-bottom - /fast-astro is the only conditional one:

• /fast-astro - scaffold or normalize an Astro/Tailwind/DaisyUI project. Optional, if the repo isn't set up.
• /fast-brief - interrogate the source docs, then write BRIEF.md with assumption tags on every claim.
• /fast-data - shape JSON files in src/data for content, fake data, UI states, scenarios, and config.
• /fast-prototype - build or iterate an Astro prototype from docs, BRIEF.md, and JSON.
• /fast-review - polish pass before sharing: visual quality, responsive behavior, DaisyUI consistency etc.

If you install via the Claude Code plugin marketplace instead of npx skills, the invocations are namespaced (/fast-preset:fast-astro, /fast-preset:fast-brief, etc.) - same skills, longer command form.

Skills Conventions

A few shared rules so the prototype stays consistent across the flow:

• BRIEF.md is the spine. fast-brief writes it; every other skill reads it. Edit it directly to course-correct.
• Uncertainty stays tracked, not rendered. BRIEF.md tags every claim [verified] / [assumed] / [unsure]; matching JSON records carry _assumed: true. The UI stays clean - fast-review turns the tracked assumptions into talking points for the share conversation.
• DaisyUI semantic tokens only. No raw Tailwind palette colors - one theme edit re-skins the whole prototype.
• Files organized per page. Components in src/components/, JSON in src/data/ - flat for one page; once a second page exists, each gets a <page>/ folder and shared things go to shared/. Props mirror JSON shape.

Inspired by

Garry Tan's gstack and Matt Pocock's skills - but made for designers who want to prototype in code, not for engineering teams who need process discipline.

Feedback

The skills are continuously improving! If you encounter any issues, have feature requests, or want to share your experience, please open an issue or discussion on GitHub.

Thanks, everyone!