：gb：英语 |：es：西班牙语

一个Claude Code元项目，用于创建具有可爱质量的专业网页。

---

问题

构建专业且具备生产环境的网络应用需要：

• 反复搭建同一个栈（React、TypeScript、Tailwind、shadcn）
• 记住设计最佳实践，避免常见陷阱
• 配置多种工具（Figma、Supabase、图像生成等）
• 保持项目间的一致性

解决方案

Claudable 是 Claude Code 预配置的“工具箱”。在这个目录中打开它，你就准备好了，可以立即创建专业网站：

• 引导克劳德遵循最佳实践的技能
• MCPs 预配置用于设计、后端和图像生成
• 模板，可与最优栈一起使用
• 设计规则自动执行（语义标记、自定义字体等）

---

技术堆栈

---

如何使用

1. 在此目录中打开 Claude 代码
2. 提出你的需求：“为人工智能初创公司创建一个登陆页面”
3. 利用现有技能引导流程

可用技能

官方插件（Anthropic）

|技能 |描述 |

Claudable

:gb: English | :es: Español

A Claude Code metaproject for creating professional web pages at Lovable-level quality.

---

The Problem

Building professional, production-ready web applications requires:

• Setting up the same stack over and over (React, TypeScript, Tailwind, shadcn)
• Remembering design best practices and avoiding common pitfalls
• Configuring multiple tools (Figma, Supabase, image generation, etc.)
• Maintaining consistency across projects

The Solution

Claudable is a pre-configured “toolbox” for Claude Code. Open it in this directory and you have everything ready to create professional websites instantly:

• Skills that guide Claude to follow best practices
• MCPs pre-configured for design, backend, and image generation
• Templates ready to use with the optimal stack
• Design rules enforced automatically (semantic tokens, custom fonts, etc.)

---

Tech Stack

---

How to Use

1. Open Claude Code in this directory
2. Ask for what you need: “Create a landing page for an AI startup”
3. Use the available skills to guide the process

Available Skills

Official Plugin (Anthropic)

Local Skills

---

Configured MCPs

---

Templates

The templates/ directory contains ready-to-use base projects:

# Copy template to new project
cp -r templates/vite-react-shadcn ../my-new-project
cd ../my-new-project
npm install
npm run dev

---

Design Rules

1. NEVER use direct color classes (text-white, bg-zinc-900)
2. ALWAYS use semantic tokens (bg-background, text-foreground)
3. AVOID generic typefaces (Inter, Arial, Roboto)