Antigravity Skills - Build and Discover AI Agent SkillsAntigravity Skills

Frontend Design Skill · Design thesis first

Frontend Design Skill: Give Every Interface a Design Thesis

Give the subject a point of view before the first line of code.

The optimized Anthropic Skill moves frontend work through frame, thesis, swap test, build, and critique, with a finish line for every phase and the natural two-file package preserved.

Source diff verifiedImmutable package verified
Frontend designDesign thesisResponsive UI
View canonical source
0
0

About This Skill

Frontend Design is Anthropic's design-lead Skill for building or reshaping interfaces with one thesis, one signature, real content, and a bounded visual verification pass.

Source and Release

Provenance

Upstream author
Anthropic / William Qian
Revision
2235be7c60b551f5de82ade908fd3816455afcda
Upstream version
commit 2235be7
License
Apache-2.0

Antigravity release

Version
0.300.1-c710dda6d3ab
Package hash
sha256:420b033d17c260426d40e41f0f8b142582eb9b89b6d5cc6cc240585508ee310a
Package status
approved
Files
2
ZIP size
6.1 KB

Changelog

  • Deterministic ZIP built from the optimized package with a versioned SHA-256 artifact.

What We Improved

Frontend task-led activation

The trigger opens with Frontend design, names the build and reshape branches, and calls out representative interface surfaces instead of starting with generic guidance.

Five phases with five finish lines

Frame, thesis, swap test, build, and critique each state what must be explicit before the next phase begins.

A subject-specific swap test

The design plan must survive a test that changes only the logo and copy; transferable choices return to the subject before implementation.

A build contract tied to rendered critique

The implementation phase co-locates real states, interface language, behavior preservation, responsiveness, focus, contrast, and reduced motion before the final critique.

Quick Start

  1. 1Frame the subject, audience, single job, stack, real content, and fixed constraints.
  2. 2Write a thesis with direction, palette, type, layout, signature, motion, and content choices.
  3. 3Run the subject-specific swap test and revise transferable choices before coding.
  4. 4Build the real states, then render representative desktop and mobile views and critique them.

Core Capabilities

One clear thesis

The plan names a visual world, why it fits the subject, and the signature the interface should be remembered by.

Reviewable design choices

Palette, type, layout, motion, and real content are explicit before the first component is written.

Swap-test discipline

Structural devices must encode sequence, category, boundary, or thesis rather than decorative trend signals.

Rendered critique finish

The loop ends with real states, responsive views, interaction checks, and a named critique list.

Use Cases

Greenfield interface

Establish a visual identity from a concrete brief before implementation.

Reshape an existing product

Inspect the current UI and record what remains intact before choosing what changes.

Responsive frontend build

Carry the thesis through working states, focus, contrast, reduced motion, and representative viewports.

Source diff and package proof verified

Evidence: source diff

Verified source-diff evidence

This release proves canonical source lineage, package inventory, the optimized true diff, and an immutable artifact. It does not claim runtime outcomes or visual comparisons.

  • .scratch/kan-300/production-release/source-evidence/candidates/frontend-design/original-inventory.json#/entries?sha256=999072b0ba54e606bc10c7ad54c842742dcc6a9b30dc61c7ae0fbaf359fba4c3
  • .scratch/kan-300/production-release/source-evidence/candidates/frontend-design/optimized-inventory.json#/entries?sha256=324aab4c46ad107f1af3e9931df46b32ef91ea35e70c89db66bcb9e69f063a83
  • .scratch/kan-300/production-release/source-evidence/candidates/frontend-design/change-set.json#/evidenceUnits/0?sha256=20309edc7835cc0fe12ab11666d3fbb4120c220dcf101752221be372b037e6fd
  • .scratch/kan-300/production-release/source-evidence/candidates/frontend-design/change-set.json#/evidenceUnits/1?sha256=20309edc7835cc0fe12ab11666d3fbb4120c220dcf101752221be372b037e6fd
  • .scratch/kan-300/production-release/source-evidence/candidates/frontend-design/change-set.json#/evidenceUnits/2?sha256=20309edc7835cc0fe12ab11666d3fbb4120c220dcf101752221be372b037e6fd
  • .scratch/kan-300/production-release/source-evidence/candidates/frontend-design/change-set.json#/evidenceUnits/3?sha256=20309edc7835cc0fe12ab11666d3fbb4120c220dcf101752221be372b037e6fd
Verification receipt
.scratch/kan-300/production-release/source-evidence/candidates/frontend-design/change-set.json?sha256=20309edc7835cc0fe12ab11666d3fbb4120c220dcf101752221be372b037e6fd
Source-diff receipt
.scratch/kan-300/production-release/source-evidence/candidates/frontend-design/change-set.json?sha256=20309edc7835cc0fe12ab11666d3fbb4120c220dcf101752221be372b037e6fd

SKILL.md

# Frontend Design

This edition derives from Anthropic's frontend-design Skill at commit 2235be7c60b551f5de82ade908fd3816455afcda.

## Design loop

Frame the job, write a thesis, run the subject-specific swap test, build from the thesis, and verify delivery through a rendered critique. Use real content and preserve product behavior in reshape work.

The natural package remains SKILL.md plus LICENSE.txt. The edition changes the instruction file only; no screenshots or rendered proof are included in this release edition.

Related Skills

Impeccable SkillFrontend art direction and UI improvement.Banana Skill ClaudeRoute a visual brief into a verified image.

Frequently Asked Questions

FAQ

What is Frontend Design Skill?
It is Anthropic's design-lead Skill for building or reshaping interfaces with a thesis, signature, real content, and a rendered critique.
What did the candidate change?
The optimized SKILL.md makes the five-phase loop and completion criteria explicit, adds the swap test, and ties the build phase to real states and quality checks.
Is it a generic frontend tutorial?
No. The Skill is an agent workflow that uses the project stack, brief, content, and incumbent visual truth as authorities for the requested surface.
Is a rendered page proof available?
No. Comparison screenshots and galleries are intentionally not rendered in this release edition; the proof plan requires a fixed brief, working implementation, viewport checks, and human review.
Can I download it now?
Yes. Download the approved immutable Frontend Design Skill: Build Distinctive Production Interfaces package from this page. Its source revision, file count, byte size, SHA-256, and release receipt are shown here; this evidence does not claim runtime outcomes.

Discussion

Discussion

0 comments
U

Quick Info

Author
Anthropic / William Qian
Published
Aug 1, 2026
Category
Frontend design
Version
0.300.1-c710dda6d3ab

Tags

Frontend designDesign thesisResponsive UI

On This Page

Trigger Phrases

Use these phrases to activate this skill in your AI coding assistant:

design a new frontendbuild a distinctive interfacereshape this UIgive this page a visual identity