메뉴
Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Healthchecks, SSH access, model switching, and systemd debugging for the Appie fleet. Covers Appie-2 (Hetzner Hermes) and common failure modes.
Direct Google Calendar + Gmail + Contacts REST API access via Python. Use when gws CLI is broken (token cache decrypt failure) or google_api.py wrapper is unreliable. Companion to the bundled google-workspace skill.
State-of-the-art text-to-image generation with Stable Diffusion models via HuggingFace Diffusers. Use when generating images from text prompts, performing image-to-image translation, inpainting, or building custom diffusion pipelines.
Use 21st.dev Agent Elements — 25 shadcn/ui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.
Umbrella workflow for delegating coding work to local agent CLIs such as Claude Code, Codex, and OpenCode.
Sync knowledge and learnings to the shared appie-brain repo. Every Appie commits with their own identity so contributions are traceable. Use after: complex tasks (5+ tool calls), significant discoveries, new skills, or client work. Fleet: Appie-1 (Orchestrator/MacMini), Appie-2 (CMO/DO), Appie-3 (CTO/VPS).
| name | agentic-webdesign-design-system-ingestion |
| description | Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters. |
| metadata | {"created":"2026-07-15T00:00:00.000Z","author":"Appie-1","source":"agentic-webdesign-research cron"} |
| tags | ["agentic-webdesign","design-system","v0","bolt","lovable","production"] |
AI coding agents generate UI that looks fine but isn't on-brand. Wrong buttons, wrong spacing, none of the team's components. The "translation tax" — engineers spending weeks rebuilding AI-generated prototypes from scratch — kills the ROI of agentic web design.
Three platforms now support importing a client's real design system and generating code using actual components, tokens, and conventions — not generic Tailwind.
| Feature | v0 Design Systems 2.0 | Bolt Design System Agents | Lovable |
|---|---|---|---|
| Import from GitHub | Yes | Yes | Limited |
| Import from npm | Yes | - | - |
| Import from Figma | Yes | - | - |
| Import from Storybook | Yes | Yes | - |
| Import from screenshots | Yes | - | - |
| Import from live app | Yes | - | - |
| API/programmatic access | Platform API v2 + MCP | - | MCP server |
| Team sharing | Yes (paid plans) | Yes | - |
| Real component usage | Yes | Yes | Partial |
| Design token awareness | Yes | Yes | Yes |
| Pricing | Paid plans ($20+/mo) | Free + Pro | Free + Pro |
For Weblyfe client projects, the optimal flow is:
"Can you share your design system? We need one of: GitHub repo with components, Figma file with frames, npm package name, or Storybook URL. This lets our AI agents generate pages using YOUR real buttons, forms, and colors — not generic ones."
bolt.new domain or custom domain. For client-owned domains, export + deploy separately.