skills.rest
ThorStarlord
ThorStarlordCOMMUNITY
Explore all skills by this author →
GitHub

ui-visual-calibration

Translate aesthetic preferences into concrete visual decisions for UI specifications.

1|Updated May 6, 2026
Search Tags:#design system#spec recovery#ui visual language#visual calibration#layout archetype#aesthetic translation#styling decisions
One-click install
npx skills add https://github.com/ThorStarlord/interface-skills --skill ui-visual-calibration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-visual-calibration
Source: https://github.com/ThorStarlord/interface-skills/tree/main/skills/ui-visual-calibration
Command: npx skills add https://github.com/ThorStarlord/interface-skills --skill ui-visual-calibration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents mental-picture drift by translating vague design taste and product references into concrete, traceable visual decisions before any blueprint work starts.

Core Features & Use Cases

  • Aesthetic-to-Structure Translation: Converts words like clean, modern, minimal, and sleek into a locked set of visual dimensions (layout archetype, density, shape language, surface style, and palette guidance).
  • Spec Recovery Support: Captures Observed vs. Target visual language so an existing UI can be reconciled into an intentional target without silent changes.
  • Audit-Friendly Output: Produces a visual-calibration.md with a translation log, confirmed vs. assumed decisions, and explicit open questions to stop downstream conflicts.

Quick Start

Use ui-visual-calibration when a user says “make it feel like Notion but cleaner,” and generate visual-calibration.md that fixes layout, density, shape language, surface style, and palette guidance in one traceable contract.

Frequently Asked Questions about ui-visual-calibration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate vague aesthetic preferences like 'clean and modern' into concrete UI specifications?▼

Visual calibration translates vague aesthetic preferences into a locked set of visual dimensions including layout archetype, density, shape language, surface style, and palette guidance to prevent mental-picture drift before blueprint work starts.

What is the best way to recover and reconcile an existing UI's visual language without silent changes?▼

Spec recovery captures Observed vs. Target visual language so an existing UI can be reconciled into an intentional target without silent changes, using a traceable contract to align your design system decisions.

How do I create a visual contract for traceable UI styling decisions?▼

You generate a visual-calibration.md file that satisfies traceability requirements by including a Translation Log with confirmed vs. assumed markers and explicit open questions to stop downstream conflicts.

Can I fix layout archetype and shape language from product references like 'make it feel like Notion'?▼

Yes, aesthetic-to-structure translation converts product references into exactly one resolved value for each visual dimension, fixing layout archetype, density, shape language, surface style, and palette guidance.

When do I need visual calibration for my design system workflow?▼

You need visual calibration when starting layout and styling work, or when recovering an existing UI without a visual-calibration sheet, ensuring all aesthetic translation decisions are documented and auditable.

How does the translation log handle assumed vs confirmed styling decisions in UI specifications?▼

The translation log explicitly marks each visual decision as confirmed or assumed, resolving exactly one value per dimension while documenting open questions to prevent silent drift during spec recovery.

Related Skills

Explore More Design & Creative Skills→
CANTAGESTUDIOCANTAGESTUDIO
3

aesthetic-cultural-research

Map aesthetic briefs to cultural references with visual language analysis.

Community
Intermediate
az9713az9713

design-brief

Parse design briefs into DESIGN.md with resolved design tokens.

Community
Intermediate
TinkerbellsTinkerbells
1

storybook

Create and maintain Vue component stories using CSF3 syntax in Storybook.

Community
Intermediate
cc01cccc01cc
4

integration-test-scenario-designer

Design end-to-end integration test scenarios and acceptance checklists from user stories.

Community
Intermediate