FriTorial#90: Build Pro-Grade Websites in Claude Cowork

Welcome to the FriTorial

Today in FriTorial🔥

• Accomplish More. Juggle Less.

• How to create websites with pro-grade UIs in Claude Cowork

• Komos turns screen demos into reliable browser automations

• NotebookLM Is Now Gemini Notebook

• Thea turns your study materials into a personal tutor

• Trending AI Tools

• Real or AI

Accomplish More. Juggle Less.

When you love what you do, it can be easy to take on more — more tasks, more deadlines, more hours – but before you know it, you don’t have time to do what you loved in the beginning. Don’t just do more – do more of what you do best.

BELAY’s flexible staffing solutions leverage industry experience with AI systems to increase productivity without sacrificing quality. You can accomplish more and juggle less with our exceptional U.S.-based Virtual Assistants, Accounting Professionals, and Marketing Assistants. Learn how with our free ebook, Delegate to Elevate, and leave the more to BELAY.

How to create websites with pro-grade UIs in Claude Cowork

Claude Cowork can build polished websites using custom design systems. By turning a Refero design into a Claude Skill, you can make Claude follow a professional visual style while building your website.

Step 1: Choose a Website Design

Go to Refero Design and browse its collection of website designs.

Select a design that matches the layout, typography, colors, and overall style you want for your website.

Step 2: Download the Design System

Open your chosen design and download its design-system file.

Prepare the file as a valid SKILL.md file

Step 3: Add the Design Skill to Claude

Open the Claude desktop app and go to:

Settings → Customize → Skills → Add Skill

Upload the prepared skill file, then turn on the toggle to enable it.

Step 4: Activate the Skill and Enter Your Prompt

Switch to Cowork mode and type / in the prompt box.

Select your uploaded design skill from the dropdown menu, then describe the website you want Claude to build.

Sample Prompt:

Build a personal portfolio website using the /[enter skill name]

Step 5: Review the Finished Website

Claude will build and preview a complete portfolio website using the selected design skill.

Scroll through the result to review the hero section, projects, skills, experience, testimonials, and contact form. Check that the design system has been applied consistently across the typography, colors, cards, buttons, and layout.

That’s how you can create polished websites in Claude Cowork. Since the design system is saved as a Skill, you can reuse it for future projects and maintain the same professional style without repeating all the design instructions.

Get 95+ Tutorials like this

Explore a world of 95+ Similar or more useful AI Tutorials, 2789+ curated AI Resources from 97+ AI creators on LinkedIn, packed with actionable tutorials and diverse prompts!

Komos turns screen demos into reliable browser automations

Komos is an AI browser automation platform that learns repetitive workflows from screen demos and turns them into reliable automations for websites, portals, and business tools.

Best Features:

• Demo-to-Workflow Automation: Converts narrated screen recordings into repeatable workflows, making setup faster than building automations step by step.

• Browser-Level AI Vision: Automates websites directly through the browser, so it can work with legacy portals and tools that do not offer APIs.

• Editable Visual Builder: Lets users adjust workflow steps, add logic, and refine automations without writing code.

• Secure Credential Handling: Uses encrypted credential management for workflows that need to log into gated systems or business accounts.

• Agent & Integration Support: Connects with AI agents through MCP and supports integrations like APIs, webhooks, email, and spreadsheet exports.

NotebookLM Is Now Gemini Notebook

Thea turns your study materials into a personal tutor

Thea is an AI-powered study platform that turns notes, PDFs, images, and videos into personalized study kits with flashcards, quizzes, summaries, and adaptive practice.

Best Features:

• Personalized Study Kits: Upload class notes, PDFs, slides, images, or videos, and Thea turns them into custom study materials based on your content.

• Adaptive Smart Study: Generates practice questions that adjust to each student’s progress, helping them focus on what they still need to master.

• Flashcards, Quizzes & Games: Combines flashcards, interactive games, and quizzes to make studying more active and engaging than rereading notes.

• Study Guide Generator: Creates AI-powered summaries and structured study guides from uploaded materials for faster review.

• 80+ Language Support: Supports studying in over 80 languages, making it useful for students who learn better in their native language.

Trending AI Tools

Lovable helps you build apps with AI.

InsForge helps AI agents add a backend to apps.

Cline helps developers code faster inside their editor.

Bythen helps creators make faceless videos with AI characters.

Mureka helps creators generate songs, vocals, and music tracks with AI.

Real or AI?

Real or AI Result

Congrats to 35.00% of you who got it right

It was Real. That was a tough one 😁

Feedback

Know someone who may be interested?