feat(skills): add vibe-aesthetic — design evaluation capture + LLM prompt#160
Open
HermeticOrmus wants to merge 1 commit into
Open
feat(skills): add vibe-aesthetic — design evaluation capture + LLM prompt#160HermeticOrmus wants to merge 1 commit into
HermeticOrmus wants to merge 1 commit into
Conversation
…ompt
Walks a page at desktop + mobile, extracts a design-token probe (palette,
typography, spacing, surface tokens, composition, meta), captures section
screenshots auto-discovered from DOM anchors, and renders an LLM-agnostic
evaluator prompt that scores the page across nine dimensions:
visual hierarchy, typography, color, spacing & layout, consistency,
accessibility (visual), emotional impact, usability (perceived),
archetypal coherence
The skill itself only captures evidence. The evaluation is produced by
the host LLM (Claude, GPT, etc.) reading the rendered prompt against the
attached screenshots and probe JSON. This split keeps capture mechanical
and reproducible while letting any LLM contribute the judgment.
Includes:
- SKILL.md — entry brief and pipeline doc
- aesthetic.sh — runner (prep + walk + prompt render)
- walk.sh — section-aware walker with auto-anchor discovery and
viewport-stepped fallback
- probe.js — design-token probe (returns JSON.stringify(...))
- prep.sh — daemon hygiene enforcing --headless to prevent silent
0-byte captures on SSH/CI sessions with empty DISPLAY
- PROMPT.md — LLM-agnostic evaluator template with rubric, anchors,
output spec, and discipline notes
- examples/reference-run.md — anonymized 8-iteration trajectory
(7.4 to 9.5) documenting realistic score movement, the
code ceiling at ~8.7, and the photography-as-ceiling
pattern
Tested against example.com (single-fold fallback path) and a real
multi-section page (auto-discovery captured 4 anchored sections + top +
bottom).
Sits alongside the vibe-explore / vibe-recon family as the design twin
of capability and auth-wall mapping.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
New skill in the
vibe-*family for design evaluation. Wherevibe-exploremaps what a page lets you do andvibe-reconmaps the auth wall,vibe-aestheticasks what does this page feel like, and where is it weak?Captures evidence (section screenshots at desktop + mobile, design-token probe), then renders an LLM-agnostic evaluator prompt that any host LLM can read to score the page across nine dimensions and produce an
AESTHETIC.mddeliverable.Use cases the skill is built for:
What changed
New skill bundle at
skills/vibe-aesthetic/:SKILL.md— entry brief, pipeline, daemon-hygiene notesaesthetic.sh— runner (prep + walk + prompt render)walk.sh— section-aware walker with auto-anchor discovery, viewport-stepped fallback when no<section id>elements existprobe.js— design-token probe (palette frequencies, typography, surface tokens, composition counts, meta). ReturnsJSON.stringify(...)so it serializes cleanly throughvibium eval --stdinprep.sh— daemon hygiene enforcing--headlessto prevent silent 0-byte captures on SSH/CI sessions with emptyDISPLAYPROMPT.md— LLM-agnostic evaluator template with rubric, score anchors, output spec, and discipline notesexamples/reference-run.md— anonymized 8-iteration trajectory (7.4 → 9.5) documenting realistic score movement, the code ceiling at ~8.7, and the photography-as-ceiling patternHow to test
From the repo root after building vibium:
Expected:
/tmp/aesthetic-test/sections/s00_top__desktop.pngetc. exist and are non-zero/tmp/aesthetic-test/probes/tokens_desktop.jsonparses as valid JSON/tmp/aesthetic-test/PROMPT.filled.mdcontains the rubric + screenshot list + probe JSON/tmp/aesthetic-test/RUN.mdhas the run summaryFor a fuller test against a real multi-section page (auto-anchor discovery exercised):
Notes
PROMPT.mdtemplate is editable — operators can retune the rubric (different dimension set, different acceptance bar, different domain register) without changing the capture pipeline.prep.shwas discovered in the field — without it, every capture command logs success but writes nothing. Worth documenting upstream so future skill authors don't repeat the pattern.example.com(single-fold fallback path) and a real multi-section deployed site (auto-discovery captured 4 anchored sections plus top + bottom).