From Figma Export to a CSS Baseline with a Socratic Tutor

In this lab, you will use Claude as a Socratic tutor to reason through the gap between raw Figma-exported CSS and a well-structured stylesheet, author your own baseline styles.css by hand, and then complete two graded Frontend Mentor challenges on top of that baseline. Professional developers rarely paste design-tool exports directly into production code; learning to identify what an export tells you (and what it does not) is a core handoff skill, and practicing it in dialogue with an AI tutor builds the questioning habits that make you a stronger, more independent developer.

Scenario

In a professional setting, developers often work from detailed Figma designs to build high-quality, pixel-perfect web components. To strengthen your development skills, this lab uses Frontend Mentor, a platform providing real-world coding challenges based on professional Figma designs. Before you write any implementation code, however, your team lead has asked you to do what strong developers do with every design handoff: study the raw export, separate durable design decisions from tool artifacts, and plan a stylesheet structure that will hold up as the project grows. Your team lead has also paired you with a mentor, in this case Claude acting as a Socratic tutor, who will question your reasoning but will never write the code for you.

Plan for approximately 4.5 hours in total. The Socratic dialogue in Part 2 should take 30 to 40 minutes; that time is absorbed by treating the third (Space Tourism) challenge as optional stretch work rather than expected work.

Objectives

By the end of this lab, you will be able to:

• Distinguish reusable design decisions (colors, typography, spacing) from incidental artifacts (absolute offsets, fixed pixel widths) in raw Figma-exported CSS.
• Use an AI tutor in a question-only Socratic role to pressure-test your own reasoning about stylesheet structure.
• Author a baseline stylesheet with CSS custom properties derived from a challenge’s style-guide.md.
• Create an account and navigate the Frontend Mentor platform.
• Complete two foundational Frontend Mentor challenges using HTML and CSS built on your baseline.

What You Will Need

• Your Per Scholas-provided Claude Pro account at claude.ai , or Claude Code in your terminal if you prefer the command line.
• A GitHub account (personal or assigned) for Frontend Mentor login and for submitting your repositories.
• VS Code and a Figma account. Dev Mode access through the Figma Education plan is helpful but not required; a fallback export is provided below.

Part 1: Set Up Frontend Mentor and Gather Raw CSS Exports

Step 1: Create a Frontend Mentor Account

Frontend Mentor requires GitHub authentication, making account creation simple.

1. Navigate to Frontend Mentor .
2. Select Log in with GitHub at the top-right of the screen.

Step 2: Explore Frontend Mentor

Take five to ten minutes to look around the Frontend Mentor platform. Here are some highlights:

• Challenges: Frontend Mentor offers a variety of challenges based on professional Figma designs, providing real-world experience.
• Community: After submitting a solution, you can view other solutions, allowing you to learn from different coding approaches.
• Articles and Resources: Frontend Mentor provides articles on best practices and tutorials.

Step 3: Download the QR Code Component Challenge

Challenge Link: QR Code Component Challenge 

1. Download Starter Files: The challenge includes pre-written HTML and CSS starter code, simulating a real-world project handoff. Download these files and open the folder in VS Code.
2. Download the Figma Design File: Open the design in Figma so you can inspect elements.
3. Review Documentation: Read through the README.md and style-guide.md files for design details, colors, and fonts. Keep style-guide.md open; you will need its values in Part 2.
4. Initialize Git: Run git init in the project folder now so your work is under version control from the start.

Step 4: Copy Raw CSS Exports for Three Elements

You need the raw, per-element CSS that Figma produces for three parts of the design:

1. The card container (the white rounded rectangle).
2. The heading text (“Improve your front-end skills by building projects”).
3. The body text (the paragraph below the heading).

If you have Dev Mode through the Figma Education plan (as covered in Lesson 3), open the design in Dev Mode, select each of the three elements, and copy the CSS shown in the inspector into a scratch file.

If you do not have Dev Mode access, use the representative raw export below, which mirrors what Figma produces for this design. Your exact values may differ slightly from one version of the challenge to another; use whichever export you have.

/* Raw export: card container */
div {
  width: 320px;
  height: 499px;
  left: 560px;
  top: 171px;
  position: absolute;
  background: white;
  box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
}
 
/* Raw export: heading text */
div {
  width: 288px;
  left: 576px;
  top: 550px;
  position: absolute;
  text-align: center;
  color: #1f314f;
  font-size: 22px;
  font-family: Outfit;
  font-weight: 700;
  line-height: 26.4px;
  word-wrap: break-word;
}
 
/* Raw export: body text */
div {
  width: 256px;
  left: 592px;
  top: 617px;
  position: absolute;
  text-align: center;
  color: #68778d;
  font-size: 15px;
  font-family: Outfit;
  font-weight: 400;
  letter-spacing: 0.19px;
  line-height: 18.9px;
  word-wrap: break-word;
}

Notice how similar this looks to the resume export you studied in Lesson 3: absolute positioning, fixed pixel dimensions, and repeated font declarations on every element. Part 2 examines why code like this is a starting point for reasoning, not a finished stylesheet.

Part 2: The Socratic Dialogue (30 to 40 Minutes)

In this part, Claude acts as your Socratic tutor. The tutor is forbidden from writing code. It may only ask you questions and explain concepts, and you must reach every conclusion yourself. This dialogue, and the stylesheet plan you produce at the end of it, are graded.

Step 1: Set Up the Socratic Tutor Role

1. Sign in to claude.ai  with your Per Scholas-provided account.
2. Recommended: Create a new Project (a Pro feature) named something like “Socratic CSS Tutor” and paste the role prompt below into the Project’s custom instructions. Custom instructions apply to every conversation in the Project, which makes the role reliable. Then start a new conversation inside the Project.
3. Alternative: If you are not using Projects, start a new chat and paste the role prompt as your very first message before anything else.

Copy this role prompt exactly:

You are acting as a Socratic tutor for a web development learner. Your role has strict rules:

1. You are strictly forbidden from writing, completing, or correcting any CSS or HTML.
   Do not produce code blocks, code snippets, selectors, or corrected property values,
   even if I ask you to.
2. You may only ask guiding questions and give conceptual explanations in plain language.
3. When I share code, respond with questions that lead me to my own conclusions about it.
4. If I ask you to write or fix code, remind me of your role and ask me a question instead.

Our topic is the transition from raw Figma-exported, per-element CSS to a structured
stylesheet baseline: separating reusable design decisions from export artifacts,
replacing absolute positioning with flow-based layout, mapping style-guide values to
CSS custom properties, and deciding what belongs in a baseline stylesheet versus
component-specific rules.

Confirm that you understand these rules, then begin by asking me to share the CSS
exports I have gathered.

Step 2: Work Through the Four Question Checkpoints

Paste your three raw CSS exports from Part 1 into the conversation. Then work through the following four checkpoints, in order, within the same conversation. At each checkpoint, raise the question with your tutor, respond to its guiding questions, and state your own conclusion in your own words before moving on. Expect the tutor to push back on vague answers; that is the point.

1. Design decisions versus artifacts: Which exported properties represent reusable design decisions (colors, font families, sizes, spacing), and which are incidental artifacts of the export (absolute left/top offsets, fixed pixel widths)? Go property by property through your three exports.
2. Why absolute positioning fails: Why does Figma’s absolute positioning break down under responsive conditions, and what flow-based layout concepts (normal flow, Flexbox, margin, padding) replace it?
3. From style guide to custom properties: Paste the contents of style-guide.md into the chat. How do its values map onto CSS custom properties declared on :root? Notice that your export shows hex values while the style guide uses HSL; discuss with your tutor which form your custom properties should record and why.
4. Baseline versus component rules: What belongs in a baseline stylesheet (reset rules, design tokens, typography base) versus in component-specific rules? Where would the card’s border-radius live? Where would the page background color live?

Step 3: Write Your Structuring Plan (Graded Checkpoint)

Still inside the conversation, write a short plan, entirely in your own words, for how you will structure your styles.css. Your plan should name the sections you will use (for example: tokens, base, typography, layout, components) and state what goes in each. Then ask Claude to critique your plan using further questions only, and revise the plan if its questions expose a weakness.

When you are satisfied, use the Share button to create a public link to the conversation. You will include this link in your submission. If sharing is disabled in your workspace, or if you used Claude Code, copy the transcript into a Markdown file instead.

Part 3: Author Your Baseline Stylesheet by Hand

Now implement the plan you defended in Part 2. You must write every line of this file yourself. The AI must not write, complete, or correct any of it; the graded value of this lab comes from you translating your own plan into code.

1. In your QR Code Component project folder, create (or replace) styles.css.
2. Declare your design tokens as custom properties on :root, derived from style-guide.md.
3. Add your base, typography, layout, and component sections according to your plan.
4. None of the export artifacts you identified in Checkpoint 1 (absolute offsets, fixed page-position widths) should appear in this file.

You may use a comment-only scaffold like the following to organize the file. The comments describe structure; every rule inside them is yours to write.

/* ==========================================================
   1. Tokens: custom properties derived from style-guide.md
   ========================================================== */
:root {
  /* Color, font-family, font-size, and spacing custom properties go here. */
}
 
/* ==========================================================
   2. Base: reset rules and element defaults
   ========================================================== */
 
/* ==========================================================
   3. Typography: heading and body text defaults
   ========================================================== */
 
/* ==========================================================
   4. Layout: page-level centering and flow
   ========================================================== */
 
/* ==========================================================
   5. Components: rules specific to this challenge's card
   ========================================================== */

Commit the baseline before moving on:

git add styles.css
git commit -m "Add hand-authored baseline stylesheet with design tokens"

Part 4: Complete the Graded Challenges

Build both graded challenges on top of your baseline stylesheet. Work without AI assistance in this part; these challenges assess your own HTML and CSS skills.

(Graded) First Challenge: QR Code Component

Challenge Link: QR Code Component Challenge 

You downloaded the starter files and design in Part 1, and your baseline styles.css is in place from Part 3.

1. Open the starter code in VS Code and inspect the Figma file as needed.
2. Implement the component’s HTML structure with semantic elements.
3. Style the component using your tokens and component section. If you find yourself hard-coding a color or font size that exists in style-guide.md, add it to your tokens instead.

Objective: Build out the QR code component to match the design as closely as possible. This simple component will help you practice aligning layout and style with a professional design.

Evaluation Criteria

(Graded) Second Challenge: Blog Preview Card

Challenge Link: Blog Preview Card Challenge 

Repeat the workflow from the first challenge for this component, reusing your baseline structure.

1. Download the starter files and Figma design.
2. Read the README.md and style-guide.md files. This challenge has its own style guide; extend your tokens pattern with its values (a fresh styles.css in a new folder or repository is fine, as long as it follows your baseline structure).
3. Implement hover and focus states for interactive elements.

Objective: Build the blog preview card to match the design, focusing on accurate layout, typography, and hover/focus states. This challenge will help reinforce your HTML and CSS skills, while adding basic interactivity.

Evaluation Criteria

(Optional Stretch) Third Challenge: Space Tourism Multi-Page Website

Challenge Link: Space Tourism Multi-Page Website 

This challenge is more complex and involves building a multi-page website with various components and interactions. It is stretch work, not expected work; the time it would have taken is what funds the Socratic dialogue in Part 2. Attempt it only after everything else in this lab is complete, and only if you have time remaining.

1. Download Starter Files: This challenge includes HTML, CSS, and JavaScript starter files.
2. Review Figma and JSON Files: Open the Figma design and data.json files to access the page data and detailed design specifications.
3. Implement Interactive Elements: Your users should be able to toggle between tabs, view different pages, and see hover states for interactive elements.

Continuing Practice

Frontend Mentor offers a wide range of challenges at different difficulty levels. For additional practice, return to the Frontend Mentor challenges page  to continue expanding your portfolio. Practicing regularly will improve your skills and help build a strong foundation in front-end development.

Part 5: Document Your Dialogue and Reflect

Create a file named AI-DIALOGUE.md at the root of your QR Code Component repository. It must contain three things:

1. Conversation evidence: The shared link to your claude.ai conversation from Part 2. If sharing was unavailable or you used Claude Code, paste the full transcript into this file instead.
2. Your structuring plan: The final version of the own-words stylesheet plan you defended in Part 2, Step 3.
3. Reflection (100 to 150 words): How did the Socratic dialogue change the way you translate design exports into structured CSS? Be specific: name at least one property or decision you now handle differently, and why.

As you write the reflection, you may also find it useful to consider how using Figma designs as references affected your coding process, what challenges you encountered aligning your code with the design specifications, and how Frontend Mentor’s community resources can help you improve as a developer.

Commit AI-DIALOGUE.md and push all of your work to GitHub. If you have not yet connected your local repository to GitHub, create an empty repository on GitHub first, then connect it and push:

git remote add origin <your-repository-url>
git branch -M main
git push -u origin main

Evaluation Criteria: Socratic Dialogue and CSS Baseline

Each criterion below is scored on the same four-level scale, scaled to the point value in the Points column. The Socratic Dialogue criterion is worth 4 points (Excellent 4, Good 3, Satisfactory 2, Needs Improvement 0 to 1). The Baseline Stylesheet and Reflection criteria are worth 3 points each (Excellent 3, Good 2, Satisfactory 1, Needs Improvement 0).

Summary

In this lab, you used Claude as a Socratic tutor to interrogate raw Figma-exported CSS, separating durable design decisions from tool artifacts, and you defended a stylesheet structure in your own words before writing a line of it. You then authored a baseline styles.css by hand and built the QR Code Component and Blog Preview Card challenges on top of it. This is the professional pattern this course returns to repeatedly: the AI sharpens your thinking, but the judgment, the plan, and the code remain yours. These projects can serve as strong additions to your development portfolio and provide a foundation for continued practice on Frontend Mentor.

References

• Frontend Mentor - Challenges 
• Kevin Powell’s Scrimba Code-Along for Space Tourism Website 
• Frontend Mentor Guide to Submitting Solutions 

Submission Guidelines

Submit your completed lab using the Start Assignment button on the assignment page in Canvas. Your submission must include:

• A link to your GitHub repository (or repositories) containing both challenge solutions built on your hand-authored baseline styles.css.
• The repository must contain AI-DIALOGUE.md at its root with your claude.ai shared conversation link (or pasted transcript for Claude Code users), your own-words structuring plan, and your 100 to 150 word reflection.

This lab is graded out of 50 points: 20 points for the QR Code Component, 20 points for the Blog Preview Card, and 10 points for the Socratic Dialogue and CSS Baseline, per the rubrics above.