Socar Design System 2.0 Development Story Part 2: Rolling It Out on the Web with Tech

Components were divided into Hook-centric and object (core) + Hook Adapter approaches based on UI coupling.

BottomSheet and Accordion, where state transitions directly control animation and gestures, were designed to be Hook-centric, while components with complex policy logic like DatePicker had their logic separated into objects like DateManager. On the React side, Adapter Hooks like useDateManager were placed to reliably connect lifecycle and state reflection.

Composite components maintained JSX composition while expanding room for service-specific custom styling through data-attribute. Alert provided an imperative API based on Alert.open() to reduce state branching and callback flow, letting the caller handle follow-up actions based on the Promise result.

Packaging was switched from tsup to rollup. preserveModules and preserveModulesRoot were used to maintain module structure, favoring tree-shaking, and banner injected use client at the top of each module to address mixed Next.js 13~15 environments and SSR/CSR requirements.

As a result, the shared static/chunk went from 1.45MB → 567.07KB, first load JS went from 373KB → 248KB, and large chunks like pages_app-xxx.js were eliminated. They confirmed a structure where only the necessary components get built within node_modules, verifying the effectiveness of the bundling strategy.

AI usage was approached not through prompts but through fixed Instructions. AGENTS.md and llms.txt were operated together to organize UI library usage, Figma rules, and exception handling criteria, and llms-full.txt and index.txt let the LLM progressively find the information it needed.

On top of this, Figma MCP was added to create a flow where results made by designers could be checked and modified directly as code within the editor. However, even for the same design, the quality of results varied significantly depending on the Instructions and how slots, states, and hidden nodes were defined in Figma, confirming that the sophistication of documentation and design rules is the key factor.