SShortSingh.
TopTechnologyAI & MLStartupsProgrammingScienceBusinessFinanceCrypto & Web3World
Back to feed
Programming

Developer Builds Production Design System Using Claude Code, Mobbin, and Penpot

0
·1 views

A developer has shared a workflow for building production-ready design systems by combining three tools: Mobbin, Claude Code, and Penpot. Mobbin provides a library of real app screenshots to research how existing products handle design challenges, while Claude Code processes those references to generate design tokens and documentation. The output includes two key files — DESIGN.md and tokens.json — which Claude Code uses to build consistent designs directly inside Penpot, a free, self-hostable design platform. The Mobbin integration requires a paid subscription, though users can substitute their own reference screenshots as an alternative. The workflow is part of an ongoing tutorial series on mastering Claude Code published on the developer's channel.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Log in to join the discussion and vote.

Log in

Related stories

0
ProgrammingDEV Community ·

Developer releases smart-retry, a TypeScript library that logs failed API calls to disk

A developer has published smart-retry, an open-source TypeScript library designed to handle API call retries more intelligently than existing solutions. Unlike generic retry wrappers, it offers drop-in clients for both Axios and Fetch, along with automatic disk logging of exhausted requests, preserving details such as URL, method, headers, body, and error for later inspection or replay. The library retries only meaningful failures by default, including network errors, timeouts, HTTP 429s, and 5xx responses, with an option to override this behaviour via a custom callback. It is available on npm under the package name @aubaid/smart-retry, with the source code hosted on GitHub. The project is actively seeking contributors, with several open issues labelled as good first issues covering areas such as test coverage, type improvements, and documentation.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

Color memory game's broken scoring formula called normal human guesses a failure

A developer built a browser game where players recreate brand colors from memory using hue, saturation, and lightness sliders, scoring each guess by measuring the color distance in CIE Lab space. The original scoring formula mapped a ΔE of 0–50 onto 100–0 points, but this meant the entire rating vocabulary compressed into a range far tighter than where real player guesses actually landed. After registering score as a custom metric in GA4 and collecting 232 samples, the developer found every round averaged below the lowest rating threshold, with 27.8% of guesses scoring a flat zero. The root problem was that a typical human guess sits around ΔE 37 — a competent performance — yet the old curve already treated anything past ΔE 27.5 as a failure. The fix raised the zero-point to ΔE 90 and added a gentle exponent curve, dropping zero-score guesses from 27.8% to 2.3% and aligning the rating bands with how people actually play.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

Frozenset Architecture Keeps LLM Critic Reliable Despite 100% Verdict Inconsistency

A software developer building an LLM-based plan critic found that the model returned a different verdict and reasoning on every one of five identical test runs, yielding a label flip rate of 1.0. Despite this complete non-determinism, no defective plan ever passed through undetected, because safety-critical checks are handled by deterministic code gates rather than the LLM itself. The system separates two failure modes — dangerous under-claiming and noisy over-claiming — and assigns each to a different non-LLM authority. A hardcoded frozenset of eligible blocker categories automatically downgrades any LLM verdict that flags issues outside a defined set of genuine safety concerns. This design, refined after earlier prompt-engineering attempts failed, ensures that LLM inconsistency affects only noise levels, not the core safety contract.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

Svelte 5.36 Lets Developers Use Await Directly in Components, Cutting Boilerplate

Since Svelte 5.36, developers can use the await keyword directly in component markup, reactive declarations, and script blocks, reducing the need for manual loading flags and error states. Svelte holds UI updates until all awaited promises resolve, preventing partially updated or 'torn' interfaces where some values are new and others are stale. Multiple independent await expressions in markup run in parallel, though sequential awaits inside scripts still execute top-to-bottom, and Svelte will issue a warning when this creates a performance waterfall. A new boundary system with a pending snippet handles placeholder UI, while $effect.pending() tracks outstanding promises for granular loading indicators. The feature is currently experimental, meaning the API details of await handling and related utilities may change without a major version bump.

0 comments Read more at DEV Community