Choose an intentional visual direction for the subject and audience.
Supporting craft · Workhuman AI practice
Give implementation a direction
I use frontend design guidance as a supporting reference when building and refining interfaces with agents.
frontend-design
The problem
Why this belongs
in the workflow.
A working interface still needs deliberate choices about hierarchy, composition and visual behaviour.
What the skill makes explicit.
Translate that direction into functional interface code.
Refine typography, layout and motion through inspection.
Evidence and learning
From instructions
to practice.
The folder contains general frontend design guidance, rather than a Workhuman-specific execution record.
Contribution and evidence scope
Presented as a tool in my practice, not an original framework or proof of a delivered company project.
Source: the supplied frontend-design skill and associated records. Internal component identifiers and company endpoints are omitted.
Process flow
How this skill handles a task.
A working interface still needs deliberate choices about hierarchy, composition and visual behaviour.
- 01
Choose direction
Choose a direction for the purpose and audience.
- 02
Build
Translate the direction into functional interface code.
- 03
Inspect
Review composition, hierarchy and visual behaviour.
- 04
Refine
Adjust typography, layout and motion.
DECISION CHECKPOINT
Does the implementation express the direction?
Proceed
Present the working interface.
Alternative / follow-up
Refine hierarchy, typography, layout and motion.
Editorial map of the documented instructions, not a recorded execution.
Inside the skill
Instructions you can inspect.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
• Constraints: Technical requirements (framework, performance, accessibility).
• Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.