1  # Design Thinking Framework: 8-Layer Design System
  2  
  3  > **Load when:** Complex multi-screen flows, design system creation, architecture decisions, need complete design thinking
  4  > **Skip when:** Simple visual adjustments, single component modifications, clear small changes
  5  > **Why it matters:** Provides complete design decision framework, ensures no critical layers are missed
  6  > **Typical failure it prevents:** Focusing only on visuals while ignoring goals, surface-level work without system thinking, designs that can't be implemented
  7  
  8  The 8-layer design framework is cc-design's core methodology. It breaks design into 8 layers, each with clear focus areas, decision methods, and validation criteria.
  9  
 10  ---
 11  
 12  ## Why We Need the 8-Layer Framework
 13  
 14  ### Common Problems
 15  
 16  **Only focusing on visuals:**
 17  - "Make a nice-looking dashboard" → Don't know what data to show
 18  - "Reference Apple style" → Don't know why it should look like Apple
 19  - "Add a gradient" → Don't know what problem the gradient solves
 20  
 21  **Only focusing on functionality:**
 22  - "Implement these 20 features" → Don't know the priorities
 23  - "Everything is important" → Information overload
 24  - "As long as it works" → Poor experience
 25  
 26  **Lacking system thinking:**
 27  - Redesigning from scratch every time → Can't reuse
 28  - Inconsistent style → High cognitive load
 29  - Can't scale → Technical debt accumulates
 30  
 31  ### Value of the 8-Layer Framework
 32  
 33  1. **Completeness**: Covers the full flow from goals to validation
 34  2. **Priority**: Clear layer dependency relationships
 35  3. **Checkable**: Each layer has clear validation criteria
 36  4. **Teachable**: Beginners can learn by following the framework
 37  5. **Diagnostic**: Quickly locate design problems
 38  
 39  ---
 40  
 41  ## 8-Layer Design System
 42  
 43  ### Layer 1: Goal Design (Why)
 44  
 45  **Definition:** Clarify the problem to solve, users to serve, and expected changes.
 46  
 47  **Key Questions:**
 48  - What problem does this solve?
 49  - Who is it for? (User personas, scenarios)
 50  - What change is expected? (Behavior, cognition, emotion)
 51  - What are the success criteria?
 52  - How to prioritize?
 53  
 54  **Thought Keywords:** Problem definition, value hypothesis, success metrics, prioritization
 55  
 56  **Why It Matters:**
 57  - Goals determine the direction of all other layers
 58  - No goals = no evaluation criteria
 59  - Wrong goals → correct execution is still failure
 60  
 61  **Existing Documents:**
 62  - `junior-designer-mode.md` - Assumptions and questions for new tasks
 63  - `design-context.md` - Context understanding
 64  
 65  **Validation Criteria:**
 66  - [ ] Can explain the core problem in one sentence
 67  - [ ] Can describe target users and usage scenarios
 68  - [ ] Has clear success metrics
 69  - [ ] Has clear priority ordering
 70  
 71  ---
 72  
 73  ### Layer 2: Information Design (What to Say, How to Say It)
 74  
 75  **Definition:** Filter, organize, and sequence information to establish cognitive paths.
 76  
 77  **Key Questions:**
 78  - What information must be shown? (Filtering)
 79  - How to group? (Categorization)
 80  - How to sequence? (Priority)
 81  - How to establish hierarchy? (Primary-secondary relationships)
 82  - What is the user's cognitive path? (Reading order)
 83  
 84  **Thought Keywords:** Filtering, grouping, sequencing, hierarchy, compression, cognitive path
 85  
 86  **Why It Matters:**
 87  - Information overload is the most common design problem
 88  - Good information design = users can quickly find what they need
 89  - Information structure determines page structure
 90  
 91  **Theoretical Foundation:**
 92  - Miller's Law: People can only process 7±2 information chunks simultaneously
 93  - Cognitive Load Theory: Reduce unnecessary cognitive consumption
 94  - Chunking: Organize information into meaningful blocks
 95  
 96  **Existing Documents:**
 97  - `design-excellence.md` - Hierarchy section
 98  - `content-guidelines.md` - Content rules
 99  - `information-design-theory.md` - Cognitive load theory
100  
101  **Validation Criteria:**
102  - [ ] Information has clear primary-secondary relationships
103  - [ ] No more than 7 items at the same hierarchy level
104  - [ ] Information grouping has clear logic
105  - [ ] Users can find core information within 3 seconds
106  
107  ---
108  
109  ### Layer 3: Structure Design (Skeleton)
110  
111  **Definition:** Build page structure, divide modules, establish layout system.
112  
113  **Key Questions:**
114  - How to divide page areas?
115  - What are the relationships between modules?
116  - How to design navigation?
117  - What are the layout system rules?
118  - How to adapt to different screens?
119  
120  **Thought Keywords:** Order, relationships, organization, architecture, grid
121  
122  **Why It Matters:**
123  - Structure is the skeleton of visuals
124  - Good structure = clear sense of order
125  - Structure constrains interaction and visuals
126  
127  **Theoretical Foundation:**
128  - Grid system: Establish visual order
129  - Modularization: Reduce complexity
130  - Responsive design: Adapt to multiple devices
131  
132  **Existing Documents:**
133  - `design-patterns.md` - Classic layout patterns
134  - `anti-patterns/layout.md` - Layout anti-patterns
135  - `frontend-design.md` - Frontend layout
136  
137  **Validation Criteria:**
138  - [ ] Page has clear area divisions
139  - [ ] Module relationships are clear
140  - [ ] Uses consistent grid system
141  - [ ] Layout works well on different screens
142  
143  ---
144  
145  ### Layer 4: Interaction Design (How People Use It)
146  
147  **Definition:** Design operation flows, feedback mechanisms, state changes, error handling.
148  
149  **Key Questions:**
150  - How do users complete tasks? (Flow)
151  - What feedback after operations? (Feedback)
152  - How to show different states? (States)
153  - How to handle errors? (Error handling)
154  - Is the operation cost reasonable? (Efficiency)
155  
156  **Thought Keywords:** Natural, low friction, predictable, feedback, fault tolerance
157  
158  **Why It Matters:**
159  - Interaction determines user experience
160  - Good interaction = users don't notice the interaction
161  - Interaction problems lead to task failure
162  
163  **Theoretical Foundation:**
164  - Fitts's Law: Larger and closer targets are easier to click
165  - Hick's Law: More choices slow down decisions
166  - Feedback psychology: Immediate feedback reduces anxiety
167  - Affordance: Design hints at how to use
168  
169  **Existing Documents:**
170  - `interactive-prototype.md` - Interactive prototypes
171  - `animation-best-practices.md` - Animation best practices
172  - `anti-patterns/interaction.md` - Interaction anti-patterns
173  - `interaction-design-theory.md` - Interaction theory
174  
175  **Validation Criteria:**
176  - [ ] Core flow has no more than 3 steps
177  - [ ] Every operation has immediate feedback
178  - [ ] State changes are clearly visible
179  - [ ] Has clear error messages and recovery mechanisms
180  
181  ---
182  
183  ### Layer 5: Visual Design (How It Looks)
184  
185  **Definition:** Design color, typography, layout, contrast, whitespace, visual rhythm.
186  
187  **Key Questions:**
188  - What colors to use? (Color system)
189  - What fonts to use? (Font selection)
190  - How to layout? (Layout rules)
191  - How to establish contrast? (Visual hierarchy)
192  - How to use whitespace? (Visual breathing)
193  - How to establish rhythm? (Repetition and variation)
194  
195  **Thought Keywords:** Contrast, order, rhythm, recognition, atmosphere
196  
197  **Why It Matters:**
198  - Visuals are the user's first impression
199  - Good visuals = clear + beautiful + consistent
200  - Visuals convey brand and emotion
201  
202  **Theoretical Foundation:**
203  - Gestalt psychology: Proximity, similarity, continuity, closure
204  - Color psychology: Emotional and cultural meanings of colors
205  - Contrast theory: Size, color, weight, whitespace
206  - Visual rhythm: Repetition establishes order, variation establishes focus
207  
208  **Existing Documents:**
209  - `design-excellence.md` - Visual excellence standards
210  - `typography-design-system.md` - Typography system
211  - `typography-spacing-examples.md` - Typography examples
212  - `anti-patterns/color.md` - Color anti-patterns
213  - `anti-patterns/typography.md` - Typography anti-patterns
214  - `visual-design-theory.md` - Visual theory
215  
216  **Validation Criteria:**
217  - [ ] Uses consistent color system (2-3 primary colors)
218  - [ ] Uses type scale (1.25 ratio)
219  - [ ] Uses spacing scale (4/8/12/16/24/32/48/64)
220  - [ ] Has clear visual hierarchy
221  - [ ] Sufficient whitespace, good visual breathing
222  
223  ---
224  
225  ### Layer 6: Brand & Emotion Design (What It Feels Like)
226  
227  **Definition:** Design temperament, tone, trust, emotional atmosphere, memorable elements.
228  
229  **Key Questions:**
230  - What is the brand positioning? (Temperament)
231  - What tone to use? (Tone of voice)
232  - How to build trust? (Trust signals)
233  - What emotion to convey? (Emotional design)
234  - What are the memorable elements? (Brand recognition)
235  
236  **Thought Keywords:** Recognition, memory, personality, trust, continuity
237  
238  **Why It Matters:**
239  - Brand is long-term value
240  - Good brand = consistent personality
241  - Emotion influences decisions
242  
243  **Theoretical Foundation:**
244  - Brand personality theory: Sincerity, excitement, competence, sophistication, ruggedness
245  - Three levels of emotional design: Visceral, behavioral, reflective
246  - Trust signals: Social proof, authority, scarcity, consistency
247  
248  **Existing Documents:**
249  - `design-styles.md` - 20 design schools
250  - `getdesign-loader.md` - Brand style cloning
251  - `brand-emotion-theory.md` - Brand emotion theory
252  
253  **Validation Criteria:**
254  - [ ] Visual style aligns with brand positioning
255  - [ ] Tone (copy, animation) is unified
256  - [ ] Has clear trust signals
257  - [ ] Emotional atmosphere matches goals
258  
259  ---
260  
261  ### Layer 7: System Design (How It Runs Long-Term)
262  
263  **Definition:** Establish design specs, component system, reuse mechanisms, extension rules, consistency governance.
264  
265  **Key Questions:**
266  - How to establish design specs? (Design tokens)
267  - How to componentize? (Component library)
268  - How to reuse? (Pattern library)
269  - How to extend? (Extension rules)
270  - How to maintain consistency? (Governance mechanisms)
271  
272  **Thought Keywords:** Consistency, reuse, constraints, extension, governance
273  
274  **Why It Matters:**
275  - Design is a system, not an artwork
276  - Good system = sustainable, scalable
277  - Systems reduce long-term costs
278  
279  **Theoretical Foundation:**
280  - Constraints enhance creativity: Limiting choices reduces decision costs
281  - Component thinking: DRY principle
282  - Token architecture: Separate decisions from implementation
283  
284  **Existing Documents:**
285  - `design-system-creation.md` - Design system creation
286  - `typography-design-system.md` - Typography system
287  - `system-design-theory.md` - System theory
288  
289  **Validation Criteria:**
290  - [ ] Has clear design tokens (colors, font sizes, spacing)
291  - [ ] Components are reusable
292  - [ ] Has clear extension rules
293  - [ ] Consistency is verifiable
294  
295  ---
296  
297  ### Layer 8: Validation & Iteration Design (Is It Effective)
298  
299  **Definition:** Validate feasibility, test usage, collect data, gather feedback, continuous optimization.
300  
301  **Key Questions:**
302  - Is it technically feasible? (Feasibility)
303  - Can users complete tasks? (Usability testing)
304  - Does data support assumptions? (Data validation)
305  - What is user feedback? (Real feedback)
306  - How to continuously optimize? (Iteration mechanism)
307  
308  **Thought Keywords:** Validation, testing, feedback, iteration, results
309  
310  **Why It Matters:**
311  - Design is hypothesis, validation is truth
312  - Good design = validated design
313  - Iteration is the only way to progress
314  
315  **Theoretical Foundation:**
316  - Lean design: Build → Measure → Learn
317  - A/B testing: Data-driven decisions
318  - User testing: Observe real behavior
319  
320  **Existing Documents:**
321  - `verification-protocol.md` - Verification protocol
322  - `verification.md` - Verification checklist
323  
324  **Validation Criteria:**
325  - [ ] Technically feasible (no console errors)
326  - [ ] Users can complete core tasks
327  - [ ] Has data supporting key assumptions
328  - [ ] Has feedback collection mechanism
329  
330  ---
331  
332  ## Relationships Between Layers
333  
334  ### Dependency Relationships (Top-Down)
335  
336  ```
337  Layer 1: Goal
338     ↓ determines
339  Layer 2: Information
340     ↓ influences
341  Layer 3: Structure
342     ↓ constrains
343  Layer 4: Interaction
344     ↓ requires
345  Layer 5: Visual
346     ↓ embodies
347  Layer 6: Brand
348     ↓ standardizes
349  Layer 7: System
350     ↓ validates
351  Layer 8: Validation
352     ↓ feeds back to
353  Layer 1: Goal (iteration)
354  ```
355  
356  **Key Dependencies:**
357  - Goal layer determines the direction of all other layers
358  - Information layer influences structure layer (content determines form)
359  - Structure layer constrains interaction layer (layout determines operations)
360  - Visual and brand layers must serve the first 4 layers
361  - System layer standardizes the first 6 layers
362  - Validation layer feeds back to goal layer forming a closed loop
363  
364  ---
365  
366  ### Conflict Resolution Rules
367  
368  When layers conflict, priority order:
369  
370  **Goal > Information > Structure > Interaction > Visual > Brand**
371  
372  **Examples:**
373  
374  **Conflict 1: Visual vs Information**
375  - Problem: Large title looks beautiful, but information hierarchy is unclear
376  - Decision: Reduce title size, ensure hierarchy clarity
377  - Reason: Information > Visual
378  
379  **Conflict 2: Brand vs Interaction**
380  - Problem: Brand requires special font, but readability is poor
381  - Decision: Use brand font for titles, readable font for body text
382  - Reason: Interaction > Brand
383  
384  **Conflict 3: System Consistency vs Local Optimization**
385  - Problem: 12px works better for this page, but system uses 14px
386  - Decision: Keep 14px, maintain system consistency
387  - Reason: System > Local
388  
389  **Exception: Can break rules when goal layer explicitly requires**
390  - If goal is "brand showcase", Brand > Interaction
391  - If goal is "visual impact", Visual > Information
392  - But must have clear reasoning and tradeoffs
393  
394  ---
395  
396  ## Complete Design Process
397  
398  ### Standard Process (Top-Down)
399  
400  1. **Define Goals** → Clarify problem, users, success criteria
401  2. **User Research** → Understand user needs and scenarios
402  3. **Organize Information** → Filter, group, sequence, establish hierarchy
403  4. **Build Structure** → Page structure, module division, layout system
404  5. **Plan Flow** → Operation flow, feedback, states, error handling
405  6. **Visual Expression** → Color, typography, layout, contrast, whitespace
406  7. **Integrate Brand** → Temperament, tone, emotion, memorable elements
407  8. **Standardize Specs** → Componentization, documentation, systematization
408  9. **Launch Validation** → Testing, data, feedback
409  10. **Continuous Optimization** → Iteration, improvement
410  
411  ### Quick Process (Small Changes)
412  
413  1. **Confirm Goal** → What problem does this change solve?
414  2. **Check Consistency** → Does it fit the existing system?
415  3. **Execute** → Implement according to specs
416  4. **Validate** → Check results
417  
418  ### Diagnostic Process (Problem Fixing)
419  
420  1. **Locate Layer** → Which layer has the problem?
421  2. **Check Dependencies** → Are there problems in upstream layers?
422  3. **Fix** → Start fixing from the root layer
423  4. **Validate** → Confirm problem is solved
424  
425  ---
426  
427  ## How to Use This Framework
428  
429  ### Pre-Design Checklist
430  
431  **Layer 1: Goal**
432  - [ ] What is the core problem?
433  - [ ] Who are the target users?
434  - [ ] What are the success criteria?
435  - [ ] How to prioritize?
436  
437  **Layer 2: Information**
438  - [ ] What information must be shown?
439  - [ ] How to group?
440  - [ ] How to sequence?
441  - [ ] Is information hierarchy clear?
442  
443  **Layer 3: Structure**
444  - [ ] Is page structure clear?
445  - [ ] Are module relationships clear?
446  - [ ] Is layout system consistent?
447  
448  **Layer 4: Interaction**
449  - [ ] Is core flow smooth?
450  - [ ] Does every operation have feedback?
451  - [ ] Are state changes clear?
452  - [ ] Is there error handling?
453  
454  **Layer 5: Visual**
455  - [ ] Is color system consistent?
456  - [ ] Is typography system standardized?
457  - [ ] Is visual hierarchy clear?
458  - [ ] Is whitespace sufficient?
459  
460  **Layer 6: Brand**
461  - [ ] Does temperament match positioning?
462  - [ ] Is tone unified?
463  - [ ] Are there trust signals?
464  - [ ] Is emotional atmosphere appropriate?
465  
466  **Layer 7: System**
467  - [ ] Are design tokens used?
468  - [ ] Are components reusable?
469  - [ ] Are there extension rules?
470  - [ ] Is consistency verifiable?
471  
472  **Layer 8: Validation**
473  - [ ] Is it technically feasible?
474  - [ ] Can users complete tasks?
475  - [ ] Is there data support?
476  - [ ] How to collect feedback?
477  
478  ---
479  
480  ### Diagnosing Design Problems
481  
482  **Symptom → Layer → Solution Direction**
483  
484  | Symptom | Problem Layer | Check Focus |
485  |---------|--------------|-------------|
486  | "Looks wrong" | Layer 5 (Visual) | Contrast, hierarchy, whitespace, consistency |
487  | "Feels awkward to use" | Layer 4 (Interaction) | Flow, feedback, states, error handling |
488  | "Can't find the focus" | Layer 2 (Information) | Filtering, grouping, sequencing, hierarchy |
489  | "Feels messy" | Layer 3 (Structure) | Page structure, module relationships, grid |
490  | "Don't know why we're doing this" | Layer 1 (Goal) | Problem definition, users, success criteria |
491  | "Temperament is off" | Layer 6 (Brand) | Positioning, tone, emotion, memorable elements |
492  | "Can't scale" | Layer 7 (System) | Tokens, components, specs, governance |
493  | "Don't know if it's effective" | Layer 8 (Validation) | Testing, data, feedback, iteration |
494  
495  ---
496  
497  ### Layer Mapping: Existing Documents
498  
499  | Design Layer | Corresponding Documents | Purpose |
500  |--------------|------------------------|---------|
501  | Layer 1: Goal | `junior-designer-mode.md`, `design-context.md`, `workflow.md` (Step 1) | Clarify problem, users, success criteria |
502  | Layer 2: Information | `design-excellence.md`, `content-guidelines.md`, `information-design-theory.md` | Filter, group, prioritize, hierarchy |
503  | Layer 3: Structure | `design-patterns.md`, `anti-patterns/layout.md`, `frontend-design.md` | Page structure, module division, layout |
504  | Layer 4: Interaction | `interactive-prototype.md`, `animation-best-practices.md`, `anti-patterns/interaction.md`, `interaction-design-theory.md` | Flow, feedback, states, error handling |
505  | Layer 5: Visual | `design-excellence.md`, `typography-design-system.md`, `anti-patterns/color.md`, `anti-patterns/typography.md`, `visual-design-theory.md` | Color, typography, layout, contrast |
506  | Layer 6: Brand | `design-styles.md`, `getdesign-loader.md`, `brand-emotion-theory.md` | Personality, tone, emotion, memory |
507  | Layer 7: System | `design-system-creation.md`, `typography-design-system.md`, `system-design-theory.md` | Componentization, documentation, systematization |
508  | Layer 8: Validation | `verification-protocol.md`, `verification.md`, `critique-guide.md`, `principle-review.md`, `design-checklist.md` | Testing, data, feedback, iteration |
509  
510  **Review Document Mapping:**
511  - **Quick Review** (daily iteration): `critique-guide.md` (5-dimension scoring)
512  - **Principle Review** (final delivery): `principle-review.md` (10 principles Pass/Warning/Fail)
513  - **Automated Check** (every review): `design-checklist.md` (50+ binary checks)
514  
515  ---
516  
517  ## Relationship to Execution Workflow
518  
519  **8-Layer Framework = Thinking Model** (what to think about)
520  **workflow.md = Execution Process** (how to execute)
521  
522  Use them together:
523  - Follow workflow.md steps during execution
524  - Use 8-layer framework to check for missing considerations during decision-making
525  - Use 8-layer framework to locate problem layers during diagnosis
526  - Use layer priority to resolve conflicts
527  
528  See the mapping table at the beginning of `workflow.md`.
529  
530  ---
531  
532  ## Remember
533  
534  1. **8-Layer Framework**: Goal → Information → Structure → Interaction → Visual → Brand → System → Validation
535  2. **Dependency Relationships**: Upper layers determine lower layers, lower layers serve upper layers
536  3. **Conflict Resolution**: Goal > Information > Structure > Interaction > Visual > Brand
537  4. **Complete Process**: Design top-down, validate bottom-up
538  5. **Diagnostic Method**: Symptom → Locate layer → Check dependencies → Fix root cause
539  
540  **The 8-layer framework is not a process, it's a thinking model.**