Agent skill
create-and-using-design-md
Help create and use a DESIGN.md file to define and inform aesthetic decisions in applications. Use when setting up design systems, reviewing UI consistency, or ensuring code follows aesthetic guidelines.
Install this agent skill to your Project
npx add-skill https://github.com/richardanaya/agent-skills/tree/main/.agents/skills/create-and-using-design-md
Metadata
Additional technical details for this skill
- author
- wizard
- version
- 1.0.0
- argument hint
- <project-path>
SKILL.md
Create and Use DESIGN.md
This skill assists in creating and utilizing a DESIGN.md file placed in the root of a project folder. The DESIGN.md serves as a living document defining the visual design system, aesthetic decisions, and guidelines to ensure consistency across the application's UI components.
How It Works
- Check Existence: Verify if a DESIGN.md file exists in the specified project root directory.
- Create Template: If not present, generate DESIGN.md with a generalized template structure.
- Customization Guidance: Provide instructions on how to customize the template for the specific project.
- Usage Integration: Offer advice on referencing DESIGN.md during coding, reviews, and refactoring to maintain aesthetic consistency.
Template Structure
The generated DESIGN.md includes the following sections, designed to be adaptable to various application types (web apps, dashboards, mobile-first designs, etc.):
- Overview: High-level description of the application's aesthetic goals.
- Colors: Primary, secondary, neutral, and semantic color palettes.
- Typography: Font families, sizes, weights, and type scale.
- Spacing: Base units, scales, and common values.
- Borders & Radius: Border widths and corner radii.
- Shadows / Elevation: Shadow definitions for depth.
- Components: Guidelines for common UI elements like buttons, cards, inputs.
- Themes: Support for light/dark modes or custom themes.
- Usage Notes: General rules for implementation and accessibility.
Usage
- Creating DESIGN.md: Run the skill with a project path to scaffold the file.
- Reviewing Code: Use DESIGN.md as a reference when writing or reviewing UI-related code to ensure adherence to the design system.
- Updating Guidelines: Edit DESIGN.md as the project evolves, and use the skill to regenerate or validate sections.
Example Template Content
When created, DESIGN.md will contain a template like this (customize as needed):
# Design System
## Overview
[Application description]. [Aesthetic focus, e.g., Clean, professional, trustworthy]. Optimized for [platform, e.g., web desktop-first with responsive mobile]. [Theme support].
## Colors
### Primary Palette
- Primary: [e.g., #1A73E8]
- Primary Dark: [darker variant]
- Primary Light: [lighter variant]
### Secondary Palette
- Secondary: [e.g., #34A853]
- Accent: [e.g., #FBBC05]
### Neutral Palette
- Background: [e.g., #FFFFFF]
- Surface: [e.g., #F8F9FA]
- Border: [e.g., #DADCE0]
- Divider: [e.g., #EDEEF0]
### Semantic Colors
- Success: [e.g., #34A853]
- Error: [e.g., #EA4335]
- Warning: [e.g., #FBBC05]
- Info: [e.g., #4285F4]
### Text Colors
- Text Primary: [e.g., #202124]
- Text Secondary: [e.g., #5F6368]
- Text Disabled: [e.g., #9AA0A6]
- Text Inverse: [e.g., #FFFFFF]
## Typography
- Font Family: [e.g., 'System Font', sans-serif]
- Base Font Size: [e.g., 16px]
- Line Height: [e.g., 1.5]
- Font Weights: [e.g., 400, 500, 600, 700]
### Type Scale
- H1: [e.g., 32px / 700 / 1.2]
- H2: [e.g., 24px / 600 / 1.3]
- H3: [e.g., 20px / 600 / 1.4]
- Body Large: [e.g., 16px / 400 / 1.5]
- Body: [e.g., 14px / 400 / 1.5]
- Caption: [e.g., 12px / 400 / 1.5]
- Small: [e.g., 11px / 400 / 1.5]
## Spacing
- Base Unit: [e.g., 8px]
- Scale: [e.g., 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px]
- Container Padding: [e.g., 24px desktop, 16px mobile]
## Borders & Radius
- Border Width: [e.g., 1px]
- Border Radius:
- Small: [e.g., 4px]
- Medium: [e.g., 8px]
- Large: [e.g., 12px]
- Pill: [e.g., 9999px]
## Shadows / Elevation
- Shadow 1 (Cards): [e.g., 0 1px 3px rgba(0, 0, 0, 0.1)]
- Shadow 2 (Modals/Dropdowns): [e.g., 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)]
- Shadow 3 (Floating Action): [e.g., 0 10px 15px -3px rgba(0, 0, 0, 0.1)]
## Components
### Buttons
- Primary: [Style description]
- Secondary: [Style description]
- Ghost: [Style description]
- Disabled: [Style description]
### Cards
- Background: [e.g., Surface color]
- Radius: [e.g., Medium]
- Padding: [e.g., 24px]
- Shadow: [e.g., Elevation 1]
- Border: [e.g., Optional 1px light divider]
### Inputs & Forms
- Height: [e.g., 48px desktop / 44px mobile]
- Border: [e.g., 1px solid border color, focus primary]
- Background: [e.g., White]
- Placeholder: [e.g., Text Secondary]
- Error state: [e.g., Red border + error text]
### Navigation
- Sidebar: [Description]
- Top nav: [Description]
## Dark Mode Support
- [Describe how themes are handled, e.g., Invert neutrals, adjust shadows]
## Usage Notes
- [General rules, e.g., Respect grid, contrast ratios, icons, animations]
This template is inspired by common design systems but generalized for flexibility. Fill in the placeholders with project-specific values to create a tailored DESIGN.md.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
richardanaya/agent-skills
bd-what-to-work-on-next
Determine what to work on next using the bd (beads) issue tracker by analyzing open issues, dependencies, and ready work
richardanaya/agent-skills
bd-create-new-product
Create a new product with a structured chain of related issues using the bd (beads) issue tracker - sets up epics, tasks, and dependencies for product development
richardanaya/agent-skills
generate-image
Generate images using xAI's Grok Imagine through the fal.ai MCP gateway. This skill enables text-to-image generation with detailed prompts for photorealistic, artistic, and stylized outputs.
richardanaya/agent-skills
pubmed-metaanalysis
Search PubMed for meta-analyses on a given medical topic using NCBI E-utilities API
richardanaya/agent-skills
interact-with-browser
a CLI for intearcting with browser
richardanaya/agent-skills
beautiful-reader
Use when the user wants to read some markdown in a beautiful way
Didn't find tool you were looking for?