Agent Skills › jjongguet/oh-my-product › web-design

web-design

GitHub

用于处理Web和UI设计需求，生成包含视觉规范、组件样式及响应式策略的DESIGN.md文档。支持从需求澄清到设计规划的全流程，确保设计一致性与可访问性，为前端开发提供结构化依据。

skills/web-design/SKILL.md jjongguet/oh-my-product

Trigger Scenarios

用户请求Web或UI设计工作需要创建或更新DESIGN.md文件生成设计简报或线框图规范

Install

npx skills add jjongguet/oh-my-product --skill web-design -g -y

More Options

Use without installing

npx skills use jjongguet/oh-my-product@web-design

指定 Agent (Claude Code)

npx skills add jjongguet/oh-my-product --skill web-design -a claude-code -g -y

安装 repo 全部 skill

npx skills add jjongguet/oh-my-product --all -g -y

预览 repo 内 skill

npx skills add jjongguet/oh-my-product --list

SKILL.md

Frontmatter

{
    "name": "web-design",
    "aliases": [
        "\/design",
        "design brief",
        "web design",
        "UI design",
        "create design"
    ],
    "description": "Activate when the user requests web\/UI design work, design briefs, wireframe specs, or wants to create\/update a DESIGN.md file. Produces structured design artifacts following the DESIGN.md pattern.",
    "primaryRole": "designer"
}

Web Design Skill (oh-my-product)

Use this skill when a user requests web design, UI design, or project design work. Follows the DESIGN.md artifact pattern from the Gemini CLI ecosystem.

Core Artifact Pattern

This skill produces and maintains three linked documents:

DESIGN.md — Living design specification (9 sections)
IMPLEMENTATION.md — 3-5 phase execution plan
MODIFICATION_PLAN.md — Change tracking for existing designs

DESIGN.md Template (9 Required Sections)

When creating a new DESIGN.md, include ALL of the following:

1. Visual Theme & Atmosphere

Site density, mood, design philosophy
Overall aesthetic direction

2. Color Palette & Roles

Semantic color names with hex codes
Functional roles: background, text, border, accent, error, success
CSS variable or Tailwind class mappings

3. Typography Rules

Font families, size scale, weight hierarchy
Line-height and letter-spacing standards

4. Component Stylings

Button, card, input, navigation, modal patterns
State definitions: hover, active, disabled, focus, loading, error

5. Layout Principles

Grid system, spacing scale, whitespace philosophy
Container widths and breakpoint strategy

6. Depth & Elevation

Shadow system, z-index layers, surface hierarchy

7. Do's and Don'ts

Design guardrails and anti-patterns to avoid

8. Responsive Behavior

Breakpoints, touch targets, component collapse strategy
Mobile-first vs desktop-first approach

9. Agent Prompt Guide

Quick reference for AI agents to apply the design system consistently

Workflow

Clarify — Gather requirements: target users, brand tone, platform targets
Design — Create DESIGN.md with all 9 sections
Plan — Generate IMPLEMENTATION.md with 3-5 execution phases
Review — Validate against accessibility (WCAG), responsiveness, brand consistency
Iterate — Update via MODIFICATION_PLAN.md for changes

Rules

ALWAYS create DESIGN.md before writing any UI code
DESIGN.md is the single source of truth for visual decisions
Every component must reference DESIGN.md tokens (no hardcoded values)
Validate accessibility: ARIA labels, keyboard nav, color contrast (4.5:1 minimum)
Test responsive behavior at mobile (375px), tablet (768px), desktop (1280px)