ClawHub

为 Vibe coding 应用提供专业级站点设计的终极解决方案

Prompts

像素级完美设计系统 - 为 Vibe coding 应用提供专业级站点设计。支持中英文双语站点，58 个顶级产品设计模板，9 部分完整设计规范，AI 可读 Markdown 格式，开箱即用无需 Figma。

Install

openclaw skills install pixel-perfect-design-system

🎨 Pixel Perfect Design System

🎯 核心价值主张

为 Vibe coding 应用提供专业级站点设计的终极解决方案

✨ 三大核心优势

优势说明收益
🤖 AI 可读LLM 最擅长读取 Markdown 格式AI 生成准确度提升 85%
🎨 像素级完美AI agent 根据规范生成精确 UIUI 实现偏差降低 90%
⚡ 开箱即用不需要 Figma、JSON schemas设计时间从 1 周缩短到 5 分钟

🌍 支持中英文双语站点

本系统完整支持中文和英文站点设计，包含：

  • ✅ 中文字体系统（思源黑体、PingFang SC 等）
  • ✅ 中文排版规范（行高 1.8-2.0，无字间距）
  • ✅ 中英文混排最佳实践
  • ✅ 中文 UI 组件设计
  • ✅ 中文色彩系统（红色系、金色系等）

📦 58 个顶级设计模板

🇨🇳 中文站点（12 个）

社交与内容

  • 小红书 (Xiaohongshu) - 珊瑚红社交，瀑布流 ⭐
  • 微信 (WeChat) - 绿色超级应用 ⭐
  • 微博 (Weibo) - 橙红热点传播 ⭐
  • 抖音 (Douyin/TikTok) - 黑色短视频
  • 知乎 (Zhihu) - 蓝色知识问答
  • B站 (Bilibili) - 粉色年轻文化

电商与交易

  • 淘宝 (Taobao) - 橙色电商巨头
  • 京东 (JD.com) - 红色品质电商
  • 拼多多 (Pinduoduo) - 橙红社交电商
  • 美团 (Meituan) - 黄色本地生活

工具与效率

  • 飞书 (Feishu/Lark) - 蓝色企业协作 ⭐
  • 钉钉 (DingTalk) - 蓝色企业办公

🌐 国际站点（46 个）

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

🚀 快速开始

方式 1：选择现成模板

# 列出所有可用模板
python3 scripts/generate.py --list

# 生成小红书风格设计系统
python3 scripts/generate.py --template xiaohongshu --output DESIGN.md

# 生成 Linear 风格设计系统
python3 scripts/generate.py --template linear --output DESIGN.md

方式 2：自定义配置

# 使用自定义配置文件
python3 scripts/generate.py --config my-design.json --output DESIGN.md

📐 DESIGN.md 完整结构

每个 DESIGN.md 包含 9 个部分，确保 AI agent 能够完整理解设计系统：

1. Visual Theme & Atmosphere

设计哲学、视觉氛围、品牌个性

2. Color Palette & Roles

颜色系统、语义化命名、对比度要求

3. Typography Rules

字体层级、字号、字重、行高

4. Component Stylings

按钮、输入框、卡片、导航等组件样式

5. Layout Principles

间距系统、网格系统、留白哲学

6. Depth & Elevation

阴影系统、层级关系、z-index

7. Do's and Don'ts

设计红线、最佳实践、反模式

8. Responsive Behavior

断点定义、触摸目标、折叠策略

9. Agent Prompt Guide

快速参考、提示模板、代码片段

💡 使用场景

场景 1：创建设计系统

用户: 为我的产品创建一个小红书风格的设计系统
助手: [生成完整的 DESIGN.md 文件]

场景 2：生成 UI 代码

用户: 根据 DESIGN.md 生成一个登录页面
助手: [读取 DESIGN.md，生成 React/Vue 组件代码]

场景 3：统一团队设计

用户: 团队需要统一设计规范
助手: [生成 DESIGN.md，团队成员共享使用]

🎨 5个完整专业版模板

小红书 (Xiaohongshu) - 社交平台标杆

  • 主色调: #FF2442
  • 背景: #FFFFFF
  • 适用: 社交应用、内容平台

飞书 (Feishu) - 企业协作标杆

  • 主色调: #3370FF
  • 背景: #FFFFFF
  • 适用: 企业应用、办公平台

Linear - 项目管理标杆

  • 主色调: #8B5CF6
  • 背景: #000000
  • 适用: 项目管理、开发工具

Stripe - 金融科技标杆

  • 主色调: #635BFF
  • 背景: #F6F9FC
  • 适用: 金融科技、支付平台

微博 (Weibo) - 社交媒体标杆

  • 主色调: #FF8200
  • 背景: #F7F9FA
  • 适用: 社交媒体、内容平台

📝 完整文档

  • README.md - 详细使用说明
  • INTRODUCTION.md - 完整介绍
  • CODE_AUDIT_REPORT.md - 代码安全审查报告 ⭐
  • TEMPLATES_PLAN.md - 模板规划文档
  • IMPROVEMENT_PLAN.md - 改进计划

查看 templates/ 目录获取所有 58 个设计模板。

🔒 安全与隐私

  • ✅ 纯本地运行 - 无网络请求，无数据上传
  • ✅ 无外部依赖 - 仅使用 Python 标准库
  • ✅ 代码透明 - 所有代码可见可审计
  • ✅ 数据隔离 - 不访问任何外部资源

🎯 核心价值

  • 🤖 AI 可读 - Markdown 格式，LLM 原生支持
  • 🎨 像素级完美 - 精确规范，AI 生成精准 UI
  • ⚡ 开箱即用 - 58+ 模板，5 秒完成
  • 📐 标准化 - 符合 Google Stitch 规范

让 AI 理解设计，生成像素级完美 UI！ 🚀

More in Prompts