AI Make

AI Make 是一个面向本地开发者的 Figma Make-like UI 生成 skill。

它不是 Figma Make 的网页克隆，不是低配 IDE，也不是单纯的 prompt 文件夹。它的任务是先生成好看的视觉方向，再把一句 UI 需求编译成可审查、可验证、可合并的前端代码 patch。

One-line definition

AI Make turns a UI request into a beautiful local React + Tailwind patch while respecting the project architecture.

Product shape

user request
  -> ai-make skill
  -> visual brief
  -> page composition blueprint
  -> ui-request
  -> ui-spec
  -> prompt-pack
  -> React + Tailwind patch
  -> verification report
  -> developer review

First supported stack

v0 只打穿一条路：

• React
• TypeScript
• Tailwind CSS
• existing project components first
• Radix only for interaction primitives when already present
• Ant Design only for complex admin controls when already present

Vue 可以作为后续 adapter，但 v0 不同时追两条线。先把 React + Tailwind 的质量打穿。

Hard boundaries

AI Make must not:

• require a server;
• create a web IDE;
• own runtime preview;
• call model APIs itself;
• guess backend fields;
• add fallback fields;
• introduce a new UI library without explicit permission;
• generate a giant one-file page;
• bypass project architecture rules;
• claim performance without verification evidence.

Directory map

ai-make/
  product/        product definition, principles, roadmap
  design/         UI/UX knowledge pack
  prompts/        compiler / planner / renderer prompt contracts
  adapters/       framework-specific generation rules
  project-rules/  local project reading and safety policies
  examples/       request -> spec -> prompt-pack -> patch summary examples

Start from product/definition.md.

Runnable prototype

The first runnable slice compiles a local project profile, prompt pack, agent handoff, multi-agent plan, task files, and review gates. It does not call a model API; Codex / Claude Code style local agents are the model execution layer.

The repo is the compiler kernel. The human-facing entry is the ai-make skill.

Install the Codex skill from the package:

npx ai-make install-skill

Or install globally:

npm i -g ai-make
ai-make install-skill

Local development still supports:

npm run install:skill

All three commands copy skills/ai-make into your local Codex skills directory and record the local compiler path.

npm test
ai-make --project E:\work\sass-seller-frontend --out .ai-make-runs\dashboard "做一个门店经营数据看板页面，专业 SaaS 风格，只做 UI，不接真实接口"

Generated artifacts:

• request.md
• project-profile.json
• visual-brief.md
• prompt-pack.md
• agent-handoff.md
• agent-plan.json
• tasks/*.md
• reviews/*.md (visual-quality, spec-compliance, react-quality, verification)

Local agent execution flow

Use ready to ask which tasks can be sent to parallel local agents:

ai-make ready --run .ai-make-runs\dashboard
ai-make ready --run .ai-make-runs\dashboard --done 01-types-data

Use task to write one copy-paste prompt for Codex / Claude Code / Cursor-style subagents:

ai-make task --run .ai-make-runs\dashboard --id 02-summary-cards

This writes:

• agent-prompts/<task-id>.prompt.md

Copy that prompt into a local coding agent. The prompt includes:

• target project;
• visual brief;
• feature slug and page component;
• task goal;
• exact write set;
• dependencies;
• non-negotiable project rules;
• required return format.

Review order after agents finish:

1. visual-quality-review.md — does the first screen actually look good?
2. spec-compliance-review.md — did agents stay inside write sets and contracts?
3. react-quality-review.md — did React/Tailwind code stay maintainable and performant?
4. verification-review.md — what commands/manual checks prove the patch is safe?

Use node src/cli.mjs only when hacking on the compiler internals. End users should use ai-make.