design-lab

Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.

1.64x

Quality

73%

Does it follow best practices?

Impact

97%

1.64x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./data/skills-md/0xdesign/design-plugin/design-lab/SKILL.md

Evaluation results

92%

57%

Design Lab: TaskCard Component Variants

FeedbackOverlay placement and variant structure

Criteria

Without context

With context

FeedbackOverlay in route dir

100%

Relative FeedbackOverlay import

100%

FeedbackOverlay rendered last

100%

targetName prop provided

100%

data-variant on all 5 containers

100%

All 5 variants created

100%

Variants on distinct axes

100%

Shared fixture data file

100%

Variant C density contrast

100%

Lab page has variant rationale

100%

No dev server invocation

Without context: $1.0581 · 3m 58s · 47 turns · 43 in / 16,807 out tokens

With context: $1.5665 · 6m 6s · 43 turns · 321 in / 25,233 out tokens

100%

13%

Create Design Brief for Checkout Redesign

Preflight detection and design brief creation

Criteria

Without context

With context

Design brief file location

100%

Package manager: pnpm

100%

Framework: Next.js App Router

70%

100%

Styling: Tailwind

100%

Project-specific color names

100%

Colors from tailwind config

100%

CSS variable tokens referenced

100%

Font family detected

100%

Existing component patterns noted

100%

Target identified

75%

100%

Scope field present

100%

Without context: $0.4364 · 2m 15s · 16 turns · 21 in / 7,869 out tokens

With context: $0.6455 · 2m 14s · 21 turns · 275 in / 6,979 out tokens

100%

44%

Finalize the UserDashboard Redesign

Finalization artifacts and temp file cleanup

Criteria

Without context

With context

DESIGN_PLAN.md created

100%

Plan: Summary section

50%

100%

Plan: Files to Change

37%

100%

Plan: Implementation Steps

62%

100%

Plan: Component API

33%

100%

Plan: Required UI States

100%

Plan: Accessibility Checklist

50%

100%

Plan: Testing Checklist

100%

DESIGN_MEMORY.md created

100%

Memory: Brand/Tone section

100%

Memory: Color section

100%

Temp directory deleted

40%

100%

Design lab route deleted

100%

User files preserved

100%

Without context: $0.5732 · 2m 26s · 24 turns · 31 in / 8,088 out tokens

With context: $1.0999 · 3m 33s · 36 turns · 289 in / 12,244 out tokens

Repository: NeverSight/skills_feed
Commit: 5342bca

Evaluated: 13 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Design Lab: TaskCard Component Variants Create Design Brief for Checkout Redesign Finalize the UserDashboard Redesign

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.