Why Pencil
Pencil is useful when labs require fast wireframes with reusable components and stronger layout control. It is a good default for composition and dark-mode labs.
Step-by-Step Setup
- Open pencil.dev and sign in to your workspace.
- Create a new document named
design-dojo-practice. - Confirm the design system panel is visible so you can insert reusable UI blocks quickly.
- Create one frame at desktop size and one frame at mobile size.
- Add a heading, body copy, button, and card to confirm component insertion works.
- If you use an AI runtime integration, configure it using the latest setup notes provided in your Pencil workspace docs.
Test Your Setup
- You can create a new frame and resize it without layout glitches.
- You can insert at least three reusable components from the design system panel.
- You can duplicate a frame and keep component overrides intact.
- You can export or share a frame link for review.
If all four checks pass, you're ready for component-swap, layout-from-brief, and dark-mode-conversion.