hulusi-tunc

Design Screen — Design skill for Claude Code

Design community

Design one screen end to end — layout, type, color, responsive, dark mode, interaction states, inclusive pass, no-slop gate.

How to install Design Screen

Installs to ~/.claude/commands/hulusi-tunc-unicorn-skills-design-screen.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/hulusi-tunc/unicorn-skills/HEAD/.claude/commands/design-screen.md -o ~/.claude/commands/hulusi-tunc-unicorn-skills-design-screen.md

Restart Claude Code, or start a new session, for it to be picked up.

What Design Screen does

description: Design one screen end to end — layout, type, color, responsive, dark mode, interaction states, inclusive pass, no-slop gate. argument-hint: "[screen description, e.g., 'user profile settings page']"

/design-screen

Design a complete screen end to end.

Steps

Grid — Define the layout grid using ui-design skill.
Hierarchy — Establish visual priority using ui-design skill.
Type, color, spacing — Apply type scale, color system, and spacing scale using

Alternatives in Design

Theme Factory — Style artifacts with professional themes including 10 pre-set color/font combinations 94.1k ★
Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Designer Skills — Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, i 2.3k ★