CtrlK
BlogDocsLog inGet started
Tessl Logo

sharaf/professional-design-system-architect

Design, build, or audit professional UI design systems across strategy, product language, foundations, tokens, components, patterns, accessibility, content, Figma/code libraries, documentation, QA, governance, adoption, measurement, theming, releases, and migration. Use when the user wants to create a design-system blueprint, review an existing design system, fix design-system drift, plan Figma/code parity, define token or component architecture, evaluate accessibility and governance maturity, or sequence design-system adoption and migration work.

100

1.75x
Quality

100%

Does it follow best practices?

Impact

100%

1.75x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

Evaluation results

100%

39%

Design System Blueprint for a Fintech Startup

Design system blueprint for fintech startup

Criteria
Without context
With context

First Actions checklist

0%

100%

Mode stated as blueprint

20%

100%

Maturity target classified

0%

100%

Required blueprint sections present

70%

100%

Decision-grade principles

87%

100%

Principle test questions and tradeoffs

12%

100%

Layered token model (four layers)

70%

100%

Primitive token leak prohibition

100%

100%

Component as public API

62%

100%

ROI as estimate with assumptions

75%

100%

System framed as product infrastructure

83%

100%

Assumptions clearly labeled

100%

100%

Foundations before component gallery

100%

100%

100%

61%

Design System Audit: Meridian

Audit of an existing design system

Criteria
Without context
With context

Evidence inventory present

0%

100%

Mode stated as audit

40%

100%

Per-domain maturity scores (0–4)

30%

100%

Scores NOT averaged into single number

0%

100%

Findings contain all 6 required fields

26%

100%

Findings avoid vague language

87%

100%

Findings ordered by severity

0%

100%

Roadmap grouped Stabilize/Standardize/Scale

0%

100%

Evidence gaps labeled

62%

100%

Dark mode NOT equated with high contrast

100%

100%

Component count not equated with quality

100%

100%

100%

28%

Component Documentation Standard for Lattice

Component documentation standard and examples

Criteria
Without context
With context

Standard includes purpose + when not to use

100%

100%

Standard mandates anatomy

0%

100%

Standard mandates variants and states

100%

100%

Standard mandates content rules

12%

100%

Standard mandates accessibility behavior

100%

100%

Standard mandates code API

75%

100%

Standard mandates testing requirements

0%

100%

Standard mandates lifecycle status

100%

100%

ARIA usage — supplements, not repairs

100%

100%

Automated checks insufficient claim absent

87%

100%

Component docs applied to DatePicker

77%

100%

Component docs applied to DataTable

77%

100%

Evaluated
Agent
Claude
Model
Claude Sonnet 4.6

Table of Contents