Learning Timeline
Key Insights
Full Interactivity
Artifacts is more than just a static visual display; it's a living code environment. You can click buttons and navigate menus as if the website were already hosted live.
Rapid Iteration Without Coding
You don't need to know programming languages to change the design. Use natural language in the chat to request changes like 'add animation' or 'change the color scheme,' and Claude will update the code in real-time.
Prompts
Basic Portfolio Generation
Target:
Claude AI
generate a portfolio website for a designer
Design Improvement (Aesthetic Update)
Target:
Claude AI
make it more aesthetic
Step by Step
Building a Portfolio Website with Claude Artifacts
- Open Claude.ai and log in to your account.
- Type your website generation prompt in the chat box (refer to the Prompt Card).
- Press 'Enter' and watch the 'Artifacts' window automatically appear on the right side of the chat.
- Wait for Claude to finish writing the code until the display switches from source code to 'Preview' mode.
- Use your cursor to interact with website elements in the 'Preview' window (click buttons, scroll, or switch project views).
- Click the 'Code' tab at the top of the Artifacts window if you want to view the generated code structure.
- Click the 'Copy' or 'Download' icon in the bottom corner of the Artifacts window to save the code files to your computer.
- Type follow-up prompts in the chat box on the left to make design changes (e.g., updating aesthetics).
- Monitor real-time code updates in the Artifacts window until the new design version is displayed.
