ryktara

Design Engineering Skill — Design skill for Claude Code

Design community

Context-first UI/UX design-engineering skill for Claude Code: inspects real codebases, retrieves verified guidance, verifies by rendering.

How to install Design Engineering Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open ryktara/design-engineering-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Design Engineering Skill does

Context-first UI/UX design-engineering skill for Claude Code: inspects real codebases, retrieves verified guidance, verifies by rendering. Web, mobile, desktop, TV and kiosk. Includes the full evaluation record.

Alternatives in Design

Figma — Fetch design context, screenshots, and assets from Figma for implementation 14.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
Brainwave — Learn to create modern websites with sleek parallax effects and bento box layouts 1.9k ★

README

design-engineering — a context-first UI/UX skill for Claude Code

A Claude Code skill that helps an AI coding agent design and change user interfaces in **real codebases** across web, mobile (SwiftUI, Compose, Flutter, React Native), desktop (WinUI, WPF, Avalonia), TV (Android TV, tvOS, Tizen/webOS) and kiosks. It inspects the project first, derives navigation, layout and density before visual style, retrieves a small bundle of verified guidance, and verifies the result by rendering.

This repository is the skill plus the complete research record behind it: six development phases, five blind held-out sets, four real-project qualification rounds and every evaluation run, published as-is. The current verdict by the skill's own pre-registered standard is **personal-production-ready, not stable-candidate** (see [Status](#status)).

What it does

When Claude Code works on a UI task the skill runs three Python commands (stdlib only, no network, no packages) and reads their output instead of loading design knowledge into context:

Step	Command	Output
Inspect the project	`scripts/inspect_project.py --out .design-inspect.json`	Stack, platforms, UI libraries, tokens, fonts, breakpoints, routing, focus/DPAD handling, and the design context already present: navigation topology, theme polarity, surface and radius language, spacing base, typography, component library — each marked KNOWN / INFERRED / UNKNOWN with evidence.
Understand the request	`scripts/advise.py requirements "" --project .design-inspect.json --explain`	A `DesignRequirements` contract: scope (is this a UI task at all), platform with typed and graded evidence (UNKNOWN beats wrong), modes (create, refactor, polish, audit, accessibility, responsive, brand, design-system, reconstruct), operations, change scope, change budget, preservation constraints, and the concepts the task demands with a priority and a `critical` flag.
Get guidance	`scripts/advis