Design as Code: How to Pack Vision into a File and Give It to the Team

## # What is SKILL? md

SKILL.md is an open standard published by Anthropic in December 2025. This is a Markdown file with YAML metadata that the agent uploads into context automatically when the task matches the description of the skill.

The key difference from AGENTS.md is that it is always loaded on every task. Skill only loads when needed – this saves context and does not overload the agent with unnecessary instructions.

Structure of the minimum skill:

my-brand-design
SKILL.md # required: instructions + metadata
Scripts/# Optionally: Scripts that an Agent Runs
у ─ references/ # Optional: Docks downloadable on request
ы ─ assets/ # Optionally: templates, fonts, tokens

The metadata in SKILL.md explains to the agent what the skill does and when to apply it. The Markdown section is the step-by-step instructions that an agent performs when a skill is active.

The standard is cross-platform: the same file works in Claude Code, Codex CLI, Cursor, Gemini CLI and Antigravity IDE unchanged.

## # Why it's more important than it seems

The old cycle of working with an agent looks like this: opened the session → explained the style → got the result → closed the session → the next session → explained the style again.

It's the same every time. Each time the tokens go to the context that was already in the last session. Every time, there's a chance the agent will deviate a little.

Skill file breaks it up. You describe a design judgment once, put it in a repository, and the agent follows it in every session, every task, every team member.

This is “design as executable knowledge”: knowledge ceases to live only in the head of one designer and becomes an artifact of the project.

## ## Ready Skills: Where to Start

The ecosystem is big. As of June 2026, there are more than 1,200 open access skills compatible with the universal SKILL.md format. That’s what you really need to do for design.

### frontend-design (Anthropic) – a mandatory start

The official skill from Anthropic, 277,000+ installations as of March 2026. It prohibits Inter, Roboto, Arial, and Space Grotesk before the first line of code is written. Forcing the agent to fix the aesthetic direction in advance - brutalism, editorial style, retrofuturism - and only then move on to implementation.

OpenAI’s parallel skill for Codex (frontend-skill) came along with GPT-5.4 with similar rules: no carousel blocks without narrative meaning, no UI from a stack of cards instead of a normal leyaut.

Installation:

#ClaudeCode
npx skills add https://github.com/anthropics/skills --kill frontend-design

#codex
# frontend-skill is installed through the marketplace inside Codex

### impeccable – when you need a little control

Most design-skills put the landing and dashboard in one pile. impeccable operates in two modes: brand (marketing, portfolio, editing) and product (app UI, dashboards, internal tools). These are different rules – and rightly so, they are divided.

23 teams in one skill: typeset, colorize, animate, layout, bolder, quieter, delight. 27 Deterministic Rules for Detecting Antipatterns in Typography, Color, Leyaut, and Motion.

npx skills add pbakaus/impeccable

### figma-implement-design – when the Figma file is already in place

For cases where the design is ready and you need an accurate translation into code, not an interpretation. It handles all component states (hover, selected, empty, loading) without individual components. Paired with Playwright, it verifies visual matching across all breakpoints.

# Codex
figma-implement-design — через marketplace внутри Codex

### accesslint – accessibility before the audit, not after

Contrast checking by WCAG AA and AAA, semantic HTML, detection of “color as a single signal” patterns. Most people do this after the audit fails. Right, before.

git clone https://github.com/accesslint/claude-marketplace.git
cp -r claude-marketplace/plugins/accesslint/skills/* ~/.claude/skills

## ## How to write your skills under the brand

Ready-made skills solve common problems. Your own skill decides your specific one – and that’s a fundamentally different level.

An example of a minimal design skill for a team:

-
name: brand-design
Description: "Uses the design system of the brand in the creation of any UI"
triggers:
- "Create a page"
- "Make a component"
- Landing.
- Interface.
-

Brand Design System

#Colors
- Primary: #1A1A2E
- Accent: #E94560
- Surface: #F5F5F0
Text: #0F0F0F
No arbitrary hex values outside this list

## Typography
Title: Neue Haas Grotesk Display, 700
Text: Neue Haas Grotesk Text, 400/500
- Mono: JetBrains Mono
Prohibited: Inter, Roboto, Arial, Space Grotes k

## Layaut
- Grid: 12 columns, 24px hatter
- Retreats: 4px step (4, 8, 12, 16, 24, 32, 48, 64, 96)
- No arbitrary values outside the scale

## Components
Buttons: primary, secondary, ghost only - no custom options
Border-radius 8px, shadow only elevation-1 or elevation-2
Forms: Input height 44px, label always on top

##The voice of the brand
Minimalist, without stock illustrations
Dense typography, a lot of air around it.
Moving only where it adds hierarchy

Three things that make Skill good:

** Specific prohibitions, not just permissions.** "Use our palette" is weak. "No hex values outside of this list" is strong. An agent understands boundaries better than recommendations.

The triggers field in the metadata tells the agent when to load the skill. Without triggers, the agent can ignore it.

*Voice and intent. * Tokens are a prerequisite. But a good skill also explains philosophy: why is minimalist, why is typography in the center, why is there no illustrations. This is what distinguishes the result with character from the technically correct but empty.

## Three levels: AGENTS.md, SKILL.md, DESIGN. md

It’s important to understand how three files relate – they solve different tasks and work at different levels.

Working scheme for a project with a design system:

repo
AGENTS.md # refers to DESIGN.md, general rules
DESIGN.md # tokens, brand philosophy
─ .claude/skills/
─ brand-design/
SKILL.md # Specific UI-workflow

In AGENTS.md, one line is sufficient:

## UI & Design System
Follow ./DESIGN.md for all visual decisions. Use brand-design skill for UI tasks.

After that, the agent knows the system in all sessions and in all team members.

## Skill as a way to convey insight

The most honest argument in favor of custom skills is not productivity, but knowledge transfer.

The discretion of an experienced designer is not transmitted through a briefing and is not copied through screenshots. But it is communicated through precisely formulated limitations and principles. That's what makes a good skill file.

One strong designer writes skill once. The rest of the team – developers, managers, other designers – work with the agent and get a result that is not ashamed to show. Not because the agent got smarter. Because it was given the right context.

The final note from real experience: the skill shows its true quality not on the first task, but on the fifth or tenth iteration. That's when you can see if he's holding the style after a few sessions or starting to drift. A good skill doesn't drift.

## ##Where to look further

• Anthropic: github.com/anthropics/skills
• Community Catalogue (1234+ Skills): npx antigravity-awesome-skills --claude
• Awesome Claude Skills: awesome-skills.com – 153 curated skills, updated May 2026
• Create your own skill: claude plugin create or just create a folder .claude/skills/my-skill/SKILL.md