taste

Name: taste
Author: tryproduck

487stars7forks

How to install taste?

tryproduck/produck-skills/taste

$npx -y skills add tryproduck/produck-skills --skill taste

Installs into the current project.

Summary

Use when improving the visual taste, positioning, polish, trust, and conversion clarity of a website or product UI. Runs a category-first visual audit, applies a decisive design pass, and verifies the result with screenshots rather than subjective vibes.

Files · 1

View on GitHub

SKILL.md

1	# Taste — Website Visual Improvement
2
3	Purpose: Upgrade a website from merely functional to visibly credible, high-intent, and conversion-ready in one focused pass.
4
5	This skill is for agents asked to "make this look better," "polish the site," "improve the landing page," "make it feel premium," or "fix the design." Do not make random decorative changes. Taste is a system: category, worldview, hierarchy, restraint, alignment, rhythm, contrast, proof, and visual verification.
6
7	> Supporting files:
8	> - [`references/taste-principles.md`](references/taste-principles.md) — category-first principles and the taste rubric.
9	> - [`references/website-improvement-loop.md`](references/website-improvement-loop.md) — the step-by-step browser screenshot loop.
10	> - [`references/benchmark-notes.md`](references/benchmark-notes.md) — one-shot before/after benchmark notes.
11	> - [`references/immersive-landing-pages.md`](references/immersive-landing-pages.md) — guidance for WebGL, animation, bespoke motion, and generated media.
12
13	---
14
15	## 1. Outcome
16
17	A successful taste pass makes the page easier to believe before it makes the page prettier.
18
19	The finished page should answer these questions within five seconds:
20
21	1. What is the category idea? The page has one memorable thesis, not a feature inventory.
22	2. Why now? The hero opens with the market shift, tension, or newly scarce resource.
23	3. Why should I care? The product exists because that tension matters.
24	4. What should I do next? One primary CTA is visually dominant.
25	5. Why should I trust it? Proof, research, recruiting seriousness, or domain artifacts appear early.
26	6. Where should my eye go? The layout has an obvious reading order.
27
28	---
29
30	## 2. Taste rules for agents
31
32	### 2.1 Decide before decorating
33
34	Before editing CSS, write these two lines:
35
36	```markdown
37	Category thesis: [sharp category phrase, e.g. "the judgment layer for product feedback"]
38	Worldview sequence: [market shift] → [scarce resource] → [why this product exists]
39	```
40
41	Then map the page to a sequence:
42
43	```markdown
44	Sequence: worldview → category thesis → domain artifact → proof → action
45	```
46
47	If the current page lacks a sequence, fix structure before styling.
48
49	### 2.2 Lead with worldview, not product mechanics
50
51	Do not open with dashboards, workflows, or feature bullets. Start with the tension the audience already feels.
52
53	Strong copy is short and declarative:
54
55	```text
56	Creation is cheap. Judgment is scarce.
57	The challenge is not generating more. It is knowing what deserves to exist.
58	We make subjective quality measurable.
59	```
60
61	Avoid `10x`, `seamless`, `AI-powered`, `supercharge`, generic productivity claims, and inflated adjectives unless the page proves them.
62
63	### 2.3 Create hierarchy with restraint
64
65	Use three hierarchy levers first:
66
67	1. Scale: one dominant headline, clear section titles, smaller supporting text.
68	2. Spacing: generous section rhythm, tight grouping inside components.
69	3. Contrast: one strong CTA color or treatment, muted secondary content.
70
71	Avoid using many colors, gradients, font weights, or shadows to compensate for weak structure. Austerity can be a premium signal when the thesis is sharp.
72
73	### 2.4 Use domain artifacts instead of generic UI
74
75	Replace fake dashboards and generic cards with artifacts from the product's judgment domain:
76
77	- Accepted/rejected examples.
78	- Interface states.
79	- Visual comparisons.
80	- Brand systems.
81	- Typography specimens.
82	- Product shots.
83	- Charts or evidence packs.
84	- Research notes, lab entries, hiring briefs, or essays.
85
86	Artifacts should make the scope of judgment felt without explaining every feature.
87
88	### 2.5 Make the visual system embody the thesis
89
90	If the product is about judgment, the page itself must feel judged, edited, and restrained. Every decorative element should reinforce the category idea. Remove neon blobs, default purple-blue gradients, robots, chatbot visuals, floating sparkles, and checkmark confetti unless they are the product's real domain language.
91
92	### 2.6 Make motion bespoke, not templated
93
94	Premium motion is a product surface, not confetti. Prefer one or two signature interactions over many generic animations:
95
96	- Hover or image trails.
97	- Orbiting artifact systems.
98	- Pointer-reactive layouts.
99	- Scroll-driven editorial reveals.
100	- Restrained canvas or WebGL moments.
101
102	Motion should express the thesis and respect static, mobile, and `prefers-reduced-motion` paths. See `references/immersive-landing-pages.md` before adding WebGL or generated media.
103
104	### 2.7 Upgrade credibility early
105
106	Add or elevate proof above the first long explanation:
107
108	- Customer logos, user count, revenue/time saved,

People who liked this also viewed

6 picks

Type

taste

487stars7forks

View on GitHub

How to install taste?

tryproduck/produck-skills/taste

$npx -y skills add tryproduck/produck-skills --skill taste

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Taste — Website Visual Improvement
2
3	Purpose: Upgrade a website from merely functional to visibly credible, high-intent, and conversion-ready in one focused pass.
4
5	This skill is for agents asked to "make this look better," "polish the site," "improve the landing page," "make it feel premium," or "fix the design." Do not make random decorative changes. Taste is a system: category, worldview, hierarchy, restraint, alignment, rhythm, contrast, proof, and visual verification.
6
7	> Supporting files:
8	> - [`references/taste-principles.md`](references/taste-principles.md) — category-first principles and the taste rubric.
9	> - [`references/website-improvement-loop.md`](references/website-improvement-loop.md) — the step-by-step browser screenshot loop.
10	> - [`references/benchmark-notes.md`](references/benchmark-notes.md) — one-shot before/after benchmark notes.
11	> - [`references/immersive-landing-pages.md`](references/immersive-landing-pages.md) — guidance for WebGL, animation, bespoke motion, and generated media.
12
13	---
14
15	## 1. Outcome
16
17	A successful taste pass makes the page easier to believe before it makes the page prettier.
18
19	The finished page should answer these questions within five seconds:
20
21	1. What is the category idea? The page has one memorable thesis, not a feature inventory.
22	2. Why now? The hero opens with the market shift, tension, or newly scarce resource.
23	3. Why should I care? The product exists because that tension matters.
24	4. What should I do next? One primary CTA is visually dominant.
25	5. Why should I trust it? Proof, research, recruiting seriousness, or domain artifacts appear early.
26	6. Where should my eye go? The layout has an obvious reading order.
27
28	---
29
30	## 2. Taste rules for agents
31
32	### 2.1 Decide before decorating
33
34	Before editing CSS, write these two lines:
35
36	```markdown
37	Category thesis: [sharp category phrase, e.g. "the judgment layer for product feedback"]
38	Worldview sequence: [market shift] → [scarce resource] → [why this product exists]
39	```
40
41	Then map the page to a sequence:
42
43	```markdown
44	Sequence: worldview → category thesis → domain artifact → proof → action
45	```
46
47	If the current page lacks a sequence, fix structure before styling.
48
49	### 2.2 Lead with worldview, not product mechanics
50
51	Do not open with dashboards, workflows, or feature bullets. Start with the tension the audience already feels.
52
53	Strong copy is short and declarative:
54
55	```text
56	Creation is cheap. Judgment is scarce.
57	The challenge is not generating more. It is knowing what deserves to exist.
58	We make subjective quality measurable.
59	```
60
61	Avoid `10x`, `seamless`, `AI-powered`, `supercharge`, generic productivity claims, and inflated adjectives unless the page proves them.
62
63	### 2.3 Create hierarchy with restraint
64
65	Use three hierarchy levers first:
66
67	1. Scale: one dominant headline, clear section titles, smaller supporting text.
68	2. Spacing: generous section rhythm, tight grouping inside components.
69	3. Contrast: one strong CTA color or treatment, muted secondary content.
70
71	Avoid using many colors, gradients, font weights, or shadows to compensate for weak structure. Austerity can be a premium signal when the thesis is sharp.
72
73	### 2.4 Use domain artifacts instead of generic UI
74
75	Replace fake dashboards and generic cards with artifacts from the product's judgment domain:
76
77	- Accepted/rejected examples.
78	- Interface states.
79	- Visual comparisons.
80	- Brand systems.
81	- Typography specimens.
82	- Product shots.
83	- Charts or evidence packs.
84	- Research notes, lab entries, hiring briefs, or essays.
85
86	Artifacts should make the scope of judgment felt without explaining every feature.
87
88	### 2.5 Make the visual system embody the thesis
89
90	If the product is about judgment, the page itself must feel judged, edited, and restrained. Every decorative element should reinforce the category idea. Remove neon blobs, default purple-blue gradients, robots, chatbot visuals, floating sparkles, and checkmark confetti unless they are the product's real domain language.
91
92	### 2.6 Make motion bespoke, not templated
93
94	Premium motion is a product surface, not confetti. Prefer one or two signature interactions over many generic animations:
95
96	- Hover or image trails.
97	- Orbiting artifact systems.
98	- Pointer-reactive layouts.
99	- Scroll-driven editorial reveals.
100	- Restrained canvas or WebGL moments.
101
102	Motion should express the thesis and respect static, mobile, and `prefers-reduced-motion` paths. See `references/immersive-landing-pages.md` before adding WebGL or generated media.
103
104	### 2.7 Upgrade credibility early
105
106	Add or elevate proof above the first long explanation:
107
108	- Customer logos, user count, revenue/time saved,

People who liked this also viewed

6 picks

Type