refactor: consolidate design folders under design/#16
Open
singyichen wants to merge 10 commits intomainfrom
Open
refactor: consolidate design folders under design/#16singyichen wants to merge 10 commits intomainfrom
singyichen wants to merge 10 commits intomainfrom
Conversation
- design-system/ → design/system/ - pencil/ → design/wireframes/ - prototype/ → design/prototype/ Update all path references in CLAUDE.md, SKILL.md, scripts/pencil-save.sh, and design/system/MASTER.md. NOTE: Pencil app repository path must be updated to design/wireframes/ in Windsurf settings. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Fix: translate prototype QA description to English - Add design/prototype/pages/profile.html - Add specs/002-profile-settings/spec.md Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Review Summary by QodoConsolidate design folders and add profile settings prototype with bilingual support
WalkthroughsDescription• Consolidate design folders under design/ hierarchy for better organization - Move design-system/ → design/system/ - Move pencil/ → design/wireframes/ - Move prototype/ → design/prototype/ • Add profile settings page prototype with bilingual (ZH/EN) support - Create design/prototype/pages/profile.html with full UI implementation - Add specs/002-profile-settings/spec.md with user stories and acceptance criteria • Update all path references across documentation and scripts - Update CLAUDE.md, SKILL.md, scripts/pencil-save.sh, design/system/MASTER.md - Add Pencil wireframe convention and workflow documentation Diagramflowchart LR
A["design-system/<br/>pencil/<br/>prototype/"] -->|"Reorganize"| B["design/system/<br/>design/wireframes/<br/>design/prototype/"]
B -->|"Add prototype"| C["design/prototype/<br/>pages/profile.html"]
B -->|"Add spec"| D["specs/002-profile-settings/<br/>spec.md"]
C -->|"Bilingual UI"| E["ZH/EN Support<br/>with i18n"]
D -->|"User Stories"| F["P1: Profile Edit<br/>P2: Language Switch"]
File Changes1. design/prototype/pages/profile.html
|
Code Review by Qodo
1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- fix: replace innerHTML with DOM API in previewAvatar() to prevent XSS - fix: update deploy-prototype.yml paths from prototype/ to design/prototype/ - fix: update design_system.py persist path from design-system/ to design/system/ - fix: update search.py help text and output paths to design/system/ - fix: update CLAUDE.md wireframe paths from pencil/ to design/wireframes/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add ui-ux-pro-max pre-generation reminder in CLAUDE.md - Update design/system/MASTER.md with revised design system rules - Update design/wireframes/design-system.pen wireframe - Update SKILL.md with design system path adjustments Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- fix: update stale pencil/pages/ path to design/wireframes/pages/ in CLAUDE.md workflow section - fix: add Pattern C (Header + Sidebar + Content) to MASTER.md for Profile pages, resolving inconsistency between profile.html sidebar layout and Pattern A spec Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- Update docstrings at lines 471 and 493 - Update format_page_override_md output at line 822 All changed from design-system/ to design/system/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…profile wireframe Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Comment on lines
+1
to
+5
| { | ||
| "version": "2.9", | ||
| "children": [ | ||
| { | ||
| "type": "frame", |
There was a problem hiding this comment.
🔴 profile.pen has only 2 frames instead of required 6, violating Pencil Wireframe Convention
The newly added design/wireframes/pages/profile.pen contains only 2 top-level frames ("Profile Desktop (ZH)" at x:0 and "Profile Desktop (EN)" at x:1520), but CLAUDE.md's Pencil Wireframe Convention (CLAUDE.md:284) mandates that each .pen file under pages/ must contain 6 side-by-side frames: Desktop ZH, Desktop EN, Mobile ZH (x:3000), Mobile EN (x:4500), Component ZH (x:6000), and Component EN (x:7500). The 4 missing frames (Mobile ZH, Mobile EN, Component ZH, Component EN) are required by the convention established in this same PR.
Prompt for agents
Add 4 missing frames to design/wireframes/pages/profile.pen to comply with the Pencil Wireframe Convention in CLAUDE.md:284-293. The file currently has only Desktop ZH (x:0) and Desktop EN (x:1520). Add:
1. Mobile ZH frame at x:3000 (mobile-width version of the profile page in Traditional Chinese)
2. Mobile EN frame at x:4500 (mobile-width version in English)
3. Component ZH frame at x:6000 (reusable UI component set — avatar upload, form fields, language toggle, toast — in ZH)
4. Component EN frame at x:7500 (same component set in EN)
Also fix the Desktop EN x-offset from 1520 to 1500 per the convention table. Use Pencil MCP tools to make these changes — do not edit the .pen file directly.
Was this helpful? React with 👍 or 👎 to provide feedback.
| { | ||
| "type": "frame", | ||
| "id": "uXyra", | ||
| "x": 1520, |
There was a problem hiding this comment.
🔴 profile.pen Desktop EN frame at x:1520 instead of convention-mandated x:1500
The "Profile Desktop (EN)" frame in design/wireframes/pages/profile.pen is positioned at x: 1520, but the Pencil Wireframe Convention in CLAUDE.md:289 specifies Desktop EN must be at x:1500. This is inconsistent with the convention established in this PR. Note: the existing dashboard.pen and login.pen also use x:1520, suggesting this may be a systemic mismatch between the convention as written and the actual files.
Was this helpful? React with 👍 or 👎 to provide feedback.
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
1 participant
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.
Summary
design-system/→design/system/pencil/→design/wireframes/prototype/→design/prototype/CLAUDE.md,SKILL.md,scripts/pencil-save.sh, anddesign/system/MASTER.mddesign/prototype/pages/profile.htmlandspecs/002-profile-settings/spec.mdTest Plan
design/CLAUDE.md,SKILL.md,scripts/pencil-save.sh,design/system/MASTER.md🤖 Generated with Claude Code