Learning Timeline
Key Insights
The Importance of Starting with Wireframes
Starting a project with a wireframe (rather than jumping straight to high-fidelity design) helps you identify necessary features and establish realistic product constraints before the development phase.
Fidelity Selection Tips
When generating initial ideas, it is recommended to use 'Lowest Fidelity'. Using 'Mid-fi' at the early stages can distract you from the functional structure by focusing too much on visual aesthetics.
AI as a Product Manager
The questionnaire in Claude Design is more than just a form; it acts like a 'Product Manager' that extrapolates your raw ideas into detailed product requirements.
Prompts
Initial App Concept Prompt
Target:
Claude Design
I'm inspired by gamified apps like Duolingo and the Brain Rot app which has a mascot and feels just fun to use. Can you make a wireframe that is clear, clean based on this idea?
Step by Step
Starting a Wireframe Project in Claude Design
- Open the Claude Design platform and name your project (e.g., 'Senior Brains').
- Type in a basic concept prompt describing the app's inspiration (e.g., a gamified app like Duolingo for seniors).
- Select additional 'Context' if needed; you can 'drag and drop' screenshots, codebase, Figma files, or design systems into the chat.
- If there are no additional files, click send to submit the prompt and begin the automated questionnaire process.
Completing the AI Questionnaire for App Structure
- Select the 'Primary device' you want to generate (e.g., iPhone).
- Set the 'Tone' or personality of the app using the provided options (e.g., 'Gentle, silly, fun but calm').
- Use the slider to select the set of screens you want to build for the wireframe.
- Choose relevant gamification elements such as 'Daily streaks' or 'XP points'.
- Set accessibility features (Baseline) such as 'Large text' and 'High contrast'.
- Add optional features like 'Voice narration controls' or a 'Simplified mode toggle' for specific users.
- Select the type of content or exercises to display (e.g., 'Memory match', 'Word recall').
- Set the design 'Fidelity' level; choose 'Lowest fidelity' to focus on a clean wireframe structure.
- Determine the involvement level of secondary users (e.g., 'Family caregiver' or 'Family cheerons').
- Confirm the product name that will be displayed on the mock-up.
- Select additional 'Toggle' functions, such as the option to show or hide the 'Mascot'.
