design-taste-frontend

Name: design-taste-frontend
Author: jmxt3

32stars3forks

How to install design-taste-frontend?

jmxt3/gitscape.ai/design-taste-frontend

$npx -y skills add jmxt3/gitscape.ai --skill design-taste-frontend

Installs into the current project.

Summary

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

Files · 1

View on GitHub

SKILL.md

1	# tasteskill: Anti-Slop Frontend Skill
2
3	> Landing pages, portfolios, and redesigns. Not dashboards, not data tables, not multi-step product UI.
4	> Every rule below is contextual. None of it fires automatically. First read the brief, then pull only what fits.
5
6	---
7
8	## 0. BRIEF INFERENCE (Read the Room Before Anything Else)
9
10	Before touching code or tweaking dials, infer what the user actually wants. Most LLM design output is bad because the model jumps to a default aesthetic instead of reading the room.
11
12	### 0.A Read these signals first
13	1. Page kind - landing (SaaS / consumer / agency / event), portfolio (dev / designer / creative studio), redesign (preserve vs overhaul), editorial / blog.
14	2. Vibe words the user used - "minimalist", "calm", "Linear-style", "Awwwards", "brutalist", "premium consumer", "Apple-y", "playful", "serious B2B", "editorial", "agency-y", "glassy", "dark tech".
15	3. Reference signals - URLs they linked, screenshots they pasted, products they named, brands they're competing with.
16	4. Audience - B2B procurement panel vs. design-conscious consumer vs. recruiter scanning a portfolio. The audience picks the aesthetic, not your taste.
17	5. Brand assets that already exist - logo, color, type, photography. For redesigns, these are starting material, not optional input (see Section 11).
18	6. Quiet constraints - accessibility-first audiences, public-sector, regulated industries, trust-first commerce, kids' products. These constraints OVERRIDE aesthetic preference.
19
20	### 0.B Output a one-line "Design Read" before generating
21	Before any code, state in one line: "Reading this as: \<page kind> for \<audience>, with a \<vibe> language, leaning toward \<design system or aesthetic family>."
22
23	Example reads:
24	- "Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion."
25	- "Reading this as: solo designer portfolio for hiring managers, with an editorial / kinetic-type language, leaning toward native CSS + scroll-driven animation + custom typography."
26	- "Reading this as: redesign of a public-sector service site, with a trust-first language, leaning toward GOV.UK Frontend or USWDS."
27
28	### 0.C If the brief is ambiguous, ask one question, do not guess
29	Ask exactly one clarifying question - never a multi-question dump - and only when the design read genuinely diverges. Example: "Should this feel closer to Linear-clean or Awwwards-experimental?"
30
31	If you can confidently infer from context, do not ask. Just declare the design read and proceed.
32
33	### 0.D Anti-Default Discipline
34	Do not default to: AI-purple gradients, centered hero over dark mesh, three equal feature cards, generic glassmorphism on everything, infinite-loop micro-animations everywhere, Inter + slate-900. These are the LLM defaults. Reach past them deliberately based on the design read.
35
36	---
37
38	## 1. THE THREE DIALS (Core Configuration)
39
40	After the design read, set three dials. Every layout, motion, and density decision below is gated by these.
41
42	* `DESIGN_VARIANCE: 8` - 1 = Perfect Symmetry, 10 = Artsy Chaos
43	* `MOTION_INTENSITY: 6` - 1 = Static, 10 = Cinematic / Physics
44	* `VISUAL_DENSITY: 4` - 1 = Art Gallery / Airy, 10 = Cockpit / Packed Data
45
46	Baseline: `8 / 6 / 4`. Use these unless the design read overrides them. Do not ask the user to edit this file - overrides happen conversationally.
47
48	### 1.A Dial Inference (design read → dial values)
49	\| Signal \| VARIANCE \| MOTION \| DENSITY \|
50	\|---\|---\|---\|---\|
51	\| "minimalist / clean / calm / editorial / Linear-style" \| 5-6 \| 3-4 \| 2-3 \|
52	\| "premium consumer / Apple-y / luxury / brand" \| 7-8 \| 5-7 \| 3-4 \|
53	\| "playful / wild / Dribbble / Awwwards / experimental / agency" \| 9-10 \| 8-10 \| 3-4 \|
54	\| "landing page / portfolio / marketing site (default)" \| 7-9 \| 6-8 \| 3-5 \|
55	\| "trust-first / public-sector / regulated / accessibility-critical" \| 3-4 \| 2-3 \| 4-5 \|
56	\| "redesign - preserve" \| match existing \| +1 \| match existing \|
57	\| "redesign - overhaul" \| +2 \| +2 \| match existing \|
58
59	### 1.B Use-Case Presets
60	\| Use case \| VARIANCE \| MOTION \| DENSITY \|
61	\|---\|---\|---\|---\|
62	\| Landing (SaaS, mainstream) \| 7 \| 6 \| 4 \|
63	\| Landing (Agency / creative) \| 9 \| 8 \| 3 \|
64	\| Landing (Premium consumer) \| 7 \| 6 \| 3 \|
65	\| Portfolio (Designer / studio) \| 8 \| 7 \| 3 \|
66	\| Portfolio (Developer) \| 6 \| 5 \| 4 \|
67	\| Editorial / Blog \| 6 \| 4 \| 3 \|
68	\| Public-sector service \| 3 \| 2 \| 5 \|
69	\| Redesign - preserve \| match \| match+1 \| match \|
70	\| Redesign - overhaul \| +2 \| +2 \| match \|
71
72	### 1.C How the Dials Drive Output
73	Use these (or user-overridden values) as global variables. Cross-references throughout this docu

People who liked this also viewed

6 picks

Type

design-taste-frontend

32stars3forks

View on GitHub

How to install design-taste-frontend?

jmxt3/gitscape.ai/design-taste-frontend

$npx -y skills add jmxt3/gitscape.ai --skill design-taste-frontend

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# tasteskill: Anti-Slop Frontend Skill
2
3	> Landing pages, portfolios, and redesigns. Not dashboards, not data tables, not multi-step product UI.
4	> Every rule below is contextual. None of it fires automatically. First read the brief, then pull only what fits.
5
6	---
7
8	## 0. BRIEF INFERENCE (Read the Room Before Anything Else)
9
10	Before touching code or tweaking dials, infer what the user actually wants. Most LLM design output is bad because the model jumps to a default aesthetic instead of reading the room.
11
12	### 0.A Read these signals first
13	1. Page kind - landing (SaaS / consumer / agency / event), portfolio (dev / designer / creative studio), redesign (preserve vs overhaul), editorial / blog.
14	2. Vibe words the user used - "minimalist", "calm", "Linear-style", "Awwwards", "brutalist", "premium consumer", "Apple-y", "playful", "serious B2B", "editorial", "agency-y", "glassy", "dark tech".
15	3. Reference signals - URLs they linked, screenshots they pasted, products they named, brands they're competing with.
16	4. Audience - B2B procurement panel vs. design-conscious consumer vs. recruiter scanning a portfolio. The audience picks the aesthetic, not your taste.
17	5. Brand assets that already exist - logo, color, type, photography. For redesigns, these are starting material, not optional input (see Section 11).
18	6. Quiet constraints - accessibility-first audiences, public-sector, regulated industries, trust-first commerce, kids' products. These constraints OVERRIDE aesthetic preference.
19
20	### 0.B Output a one-line "Design Read" before generating
21	Before any code, state in one line: "Reading this as: \<page kind> for \<audience>, with a \<vibe> language, leaning toward \<design system or aesthetic family>."
22
23	Example reads:
24	- "Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion."
25	- "Reading this as: solo designer portfolio for hiring managers, with an editorial / kinetic-type language, leaning toward native CSS + scroll-driven animation + custom typography."
26	- "Reading this as: redesign of a public-sector service site, with a trust-first language, leaning toward GOV.UK Frontend or USWDS."
27
28	### 0.C If the brief is ambiguous, ask one question, do not guess
29	Ask exactly one clarifying question - never a multi-question dump - and only when the design read genuinely diverges. Example: "Should this feel closer to Linear-clean or Awwwards-experimental?"
30
31	If you can confidently infer from context, do not ask. Just declare the design read and proceed.
32
33	### 0.D Anti-Default Discipline
34	Do not default to: AI-purple gradients, centered hero over dark mesh, three equal feature cards, generic glassmorphism on everything, infinite-loop micro-animations everywhere, Inter + slate-900. These are the LLM defaults. Reach past them deliberately based on the design read.
35
36	---
37
38	## 1. THE THREE DIALS (Core Configuration)
39
40	After the design read, set three dials. Every layout, motion, and density decision below is gated by these.
41
42	* `DESIGN_VARIANCE: 8` - 1 = Perfect Symmetry, 10 = Artsy Chaos
43	* `MOTION_INTENSITY: 6` - 1 = Static, 10 = Cinematic / Physics
44	* `VISUAL_DENSITY: 4` - 1 = Art Gallery / Airy, 10 = Cockpit / Packed Data
45
46	Baseline: `8 / 6 / 4`. Use these unless the design read overrides them. Do not ask the user to edit this file - overrides happen conversationally.
47
48	### 1.A Dial Inference (design read → dial values)
49	\| Signal \| VARIANCE \| MOTION \| DENSITY \|
50	\|---\|---\|---\|---\|
51	\| "minimalist / clean / calm / editorial / Linear-style" \| 5-6 \| 3-4 \| 2-3 \|
52	\| "premium consumer / Apple-y / luxury / brand" \| 7-8 \| 5-7 \| 3-4 \|
53	\| "playful / wild / Dribbble / Awwwards / experimental / agency" \| 9-10 \| 8-10 \| 3-4 \|
54	\| "landing page / portfolio / marketing site (default)" \| 7-9 \| 6-8 \| 3-5 \|
55	\| "trust-first / public-sector / regulated / accessibility-critical" \| 3-4 \| 2-3 \| 4-5 \|
56	\| "redesign - preserve" \| match existing \| +1 \| match existing \|
57	\| "redesign - overhaul" \| +2 \| +2 \| match existing \|
58
59	### 1.B Use-Case Presets
60	\| Use case \| VARIANCE \| MOTION \| DENSITY \|
61	\|---\|---\|---\|---\|
62	\| Landing (SaaS, mainstream) \| 7 \| 6 \| 4 \|
63	\| Landing (Agency / creative) \| 9 \| 8 \| 3 \|
64	\| Landing (Premium consumer) \| 7 \| 6 \| 3 \|
65	\| Portfolio (Designer / studio) \| 8 \| 7 \| 3 \|
66	\| Portfolio (Developer) \| 6 \| 5 \| 4 \|
67	\| Editorial / Blog \| 6 \| 4 \| 3 \|
68	\| Public-sector service \| 3 \| 2 \| 5 \|
69	\| Redesign - preserve \| match \| match+1 \| match \|
70	\| Redesign - overhaul \| +2 \| +2 \| match \|
71
72	### 1.C How the Dials Drive Output
73	Use these (or user-overridden values) as global variables. Cross-references throughout this docu

People who liked this also viewed

6 picks

Type