# Roughjs Design > Hand-drawn sketchy graphics and natural organic diagrams using Rough.js (rough-stuff/rough). Eliminates rigid, artificial AI plastic styling with organic human-drawn aesthetics for wireframes, charts, and diagrams. - Skill: `marvin-lijunzan/roughjs-design` (Agent Skill) - Install (CLI): `npx skillmds@latest add marvin-lijunzan/roughjs-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/marvin-lijunzan/roughjs-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: Marvin-LiJunZan (https://skillmd.com/u/marvin-lijunzan) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/marvin-lijunzan/roughjs-design --- # Rough.js Design — Organic Hand-Drawn UI & Diagramming Rough.js brings the natural, warm, imperfect quality of human hand-drawn sketches to UI mockups, architecture diagrams, and scientific schematics, instantly eliminating the sterile, artificial "AI plastic" look. --- ## 1. Core Visual Principles 1. **Controlled Roughness**: - `roughness: 1.2–2.0` gives a lively hand-drawn feel without losing readability. - `bowing: 1.0–1.5` introduces subtle curved imperfections into straight lines. 2. **Hachure & Cross-Hatch Fills**: - Replace flat solid fills with `hachure`, `zigzag`, `cross-hatch`, or `dots`. - Use semi-transparent stroke colors so underlying canvas textures show through. 3. **Typography Pairing**: - Pair Rough.js graphics with informal/handwritten fonts: *Virgil*, *Comic Shanns*, *Caveat*, or clean humanistic sans like *Plus Jakarta Sans*. --- ## 2. Quick HTML / Canvas Implementation Template ```html

``` --- ## 3. When to Use Rough.js in the Software Lifecycle - **Phase 1 (Ideation & Wireframing)**: Create low-fidelity wireframes that invite feedback rather than premature pixel-polishing debates. - **System Architecture Explanations**: Present high-level conceptual flows in documentation that look human-crafted and accessible. - **Playful / Creative Product Dashboards**: Inject personality into empty states, loading screens, and onboarding walkthroughs.