菜单
Modern UI design system and guidelines for building clean, professional interfaces. Use when creating or modifying any UI components, web pages, React components, HTML/CSS, or visual interfaces. Ensures consistent, modern design with proper spacing, typography, colors, and interaction patterns.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/alunadev/ald-skills --skill design-guide命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Use PROACTIVELY to document new features, significant code changes, or when creating technical specifications for a feature not included in the original project technical specification. Specializes in creating comprehensive feature documentation for non-professional developers.
Write, read, and apply DESIGN.md files — Google Stitch's open AI-readable design-system format (YAML design tokens + Markdown rationale). Use when asked to "create a design.md", "extract a design system from [brand/PDF/site/screenshots]", "document this brand for AI tools", or when reverse-engineering a brand's visual identity into reusable tokens for an AI coding agent to apply consistently.
Builds complete bilingual email drafts from intent and audience. Use when the user asks to write, rewrite, localize, polish, or generate an email, campaign email, outreach message, customer update, follow-up, announcement, invite, sales email, internal note, or lifecycle email and wants clear subject lines, preheaders, body copy, CTAs, variants, or English and Spanish versions.
基于 SOC 职业分类
正在显示 SKILL.md
| name | design-guide |
| description | Modern UI design system and guidelines for building clean, professional interfaces. Use when creating or modifying any UI components, web pages, React components, HTML/CSS, or visual interfaces. Ensures consistent, modern design with proper spacing, typography, colors, and interaction patterns. |
Comprehensive guidelines for creating modern, professional UIs with clean aesthetics and excellent user experience.
Clean & Minimal
Neutral Color Palette
Consistent Spacing
Typography
Subtle Shadows
box-shadow: 0 1px 3px rgba(0,0,0,0.1)0 4px 6px rgba(0,0,0,0.07)Rounded Corners
Interactive States
Mobile-First
/* Primary Button */
.btn-primary {
padding: 12px 24px;
background: #2563EB; /* Accent color */
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.2s;
}
.btn-primary:hover {
background: #1D4ED8;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Secondary Button */
.btn-secondary {
padding: 12px 24px;
background: white;
color: #374151;
border: 1px solid #D1D5DB;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-secondary:hover {
background: #F9FAFB;
border-color: #9CA3AF;
}
.card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: box-shadow 0.2s;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.input {
width: 100%;
padding: 12px 16px;
font-size: 16px;
background: white;
border: 1px solid #D1D5DB;
border-radius: 8px;
transition: border-color 0.2s;
}
.input:focus {
outline: none;
border-color: #2563EB;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
color: #374151;
}
/* Container with proper max-width */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Section spacing */
.section {
padding: 64px 0;
}
/* Grid with consistent gaps */
.grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Gray Scale (Primary)
#FFFFFF - Pure white (backgrounds)#FAFAFA - Off-white (alternate backgrounds)#F3F4F6 - Very light gray (hover states)#E5E7EB - Light gray (borders, dividers)#D1D5DB - Medium gray (borders)#9CA3AF - Gray (secondary text)#6B7280 - Dark gray (body text)#374151 - Darker gray (headings)#1F2937 - Very dark gray (primary text)Accent Color Examples (pick ONE)
#2563EB (professional, trustworthy)#059669 (success, growth)#4F46E5 (modern, tech)#EA580C (energetic, friendly)/* Mobile first approach */
.element {
/* Mobile styles (default) */
}
@media (min-width: 640px) {
/* Tablet styles */
}
@media (min-width: 1024px) {
/* Desktop styles */
}
@media (min-width: 1280px) {
/* Large desktop styles */
}
Before finalizing any UI: