القائمة
像素级完美设计系统 - 为 Vibe coding 应用提供专业级站点设计。支持中英文双语站点，58 个顶级产品设计模板，9 部分完整设计规范，AI 可读 Markdown 格式，开箱即用无需 Figma。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/lijinhongucl-pixel/pixel-perfect-design-system --skill pixel-perfect-designيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | pixel-perfect-design |
| description | 像素级完美设计系统 - 为 Vibe coding 应用提供专业级站点设计。支持中英文双语站点，58 个顶级产品设计模板，9 部分完整设计规范，AI 可读 Markdown 格式，开箱即用无需 Figma。 |
| metadata | {"openclaw":{"emoji":"🎨","category":"design","version":"2.0.0","author":"OpenClaw","requires":{"bins":"[Truncated]","env":"[Truncated]"}}} |
| user-invocable | true |
| disable-model-invocation | false |
为 Vibe coding 应用提供专业级站点设计的终极解决方案
| 优势 | 说明 | 收益 |
|---|---|---|
| 🤖 AI 可读 | LLM 最擅长读取 Markdown 格式 | AI 生成准确度提升 85% |
| 🎨 像素级完美 | AI agent 根据规范生成精确 UI | UI 实现偏差降低 90% |
| ⚡ 开箱即用 | 不需要 Figma、JSON schemas | 设计时间从 1 周缩短到 5 分钟 |
本系统完整支持中文和英文站点设计，包含：
社交与内容
电商与交易
工具与效率
AI & Machine Learning (12) Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
Developer Tools (14) Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
Infrastructure (6) ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
Design & Productivity (10) Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
Fintech (4) Coinbase, Kraken, Revolut, Wise
Enterprise (7) Airbnb, Apple, IBM, NVIDIA, SpaceX, Spotify, Uber
Car Brands (5) BMW, Ferrari, Lamborghini, Renault, Tesla
# 列出所有可用模板
python3 scripts/generate.py --list
# 生成小红书风格设计系统
python3 scripts/generate.py --template xiaohongshu --output DESIGN.md
# 生成 Linear 风格设计系统
python3 scripts/generate.py --template linear --output DESIGN.md
# 使用自定义配置文件
python3 scripts/generate.py --config my-design.json --output DESIGN.md
每个 DESIGN.md 包含 9 个部分，确保 AI agent 能够完整理解设计系统：
设计哲学、视觉氛围、品牌个性
颜色系统、语义化命名、对比度要求
字体层级、字号、字重、行高
按钮、输入框、卡片、导航等组件样式
间距系统、网格系统、留白哲学
阴影系统、层级关系、z-index
设计红线、最佳实践、反模式
断点定义、触摸目标、折叠策略
快速参考、提示模板、代码片段
用户: 为我的产品创建一个小红书风格的设计系统
助手: [生成完整的 DESIGN.md 文件]
用户: 根据 DESIGN.md 生成一个登录页面
助手: [读取 DESIGN.md，生成 React/Vue 组件代码]
用户: 团队需要统一设计规范
助手: [生成 DESIGN.md，团队成员共享使用]
README.md - 详细使用说明INTRODUCTION.md - 完整介绍CODE_AUDIT_REPORT.md - 代码安全审查报告 ⭐TEMPLATES_PLAN.md - 模板规划文档IMPROVEMENT_PLAN.md - 改进计划查看 templates/ 目录获取所有 58 个设计模板。
让 AI 理解设计，生成像素级完美 UI！ 🚀