Claude Code-ൽ ടെർമിനൽ UI മക്കപ്പുകൾക്കായി (mockups) Anthropic /design കമാൻഡ് ചേർക്കുന്നു

ഡെവലപ്പർമാർക്ക് ടെർമിനൽ വിട്ടുപോകാതെ തന്നെ UI മക്കപ്പുകൾ നിർമ്മിക്കാനും അവ പരിഷ്കരിക്കാനും കാണാനും സഹായിക്കുന്ന പുതിയ /design കമാൻഡിലൂടെ Anthropic Claude Code വിപുലീകരിച്ചിരിക്കുന്നു.

ടെർമിനലിൽ നേരിട്ട് UI പ്രോട്ടോടൈപ്പിംഗ് (Prototyping)

Figma-യും ഷെല്ലും (shell) തമ്മിൽ മാറിമാറി ഉപയോഗിക്കുന്നതിന് പകരം, ഇനി നിങ്ങൾക്ക് /design a few options for a login screen എന്ന് ടൈപ്പ് ചെയ്യാം. ഉയർന്ന നിലവാരമുള്ള (high-fidelity) മക്കപ്പുകൾ പ്രദർശിപ്പിക്കുന്ന നിരവധി ഇന്ററാക്ടീവ് "ആർട്ട്‌ബോർഡുകളുമായി" (artboards) Claude മറുപടി നൽകുന്നു. പ്രൊഡക്ഷൻ കോഡ് എഴുതുന്നതിന് മുൻപ് തന്നെ നിങ്ങൾക്ക് ലേഔട്ടുകൾ താരതമ്യം ചെയ്യാനും ഇഷ്ടപ്പെട്ടത് തിരഞ്ഞെടുക്കാനും തുടർ ചോദ്യങ്ങളിലൂടെ രൂപകൽപ്പന പരിഷ്കരിക്കാനും കഴിയും.

നിങ്ങളുടെ കോഡ്‌ബേസിൽ (Codebase) നിന്നുള്ള കോൺടെക്സ്റ്റ് അധിഷ്ഠിത മക്കപ്പുകൾ

Claude നിലവിലെ റെപ്പോസിറ്ററി (repository) വായിക്കുന്നുണ്ടെന്ന് ഡെവലപ്പർ നേറ്റ് പാറോട്ട് (Nate Parrott) നിരീക്ഷിക്കുന്നു. ഇത് കളർ പാലറ്റുകൾ, കമ്പോണന്റ് ലൈബ്രറികൾ, ലേഔട്ട് രീതികൾ എന്നിവ ശേഖരിക്കുകയും പ്രോജക്റ്റിന്റെ നിലവിലുള്ള ശൈലിക്ക് അനുസൃതമായി ഓരോ ഡിസൈനും തയ്യാറാക്കുകയും ചെയ്യുന്നു. ഫലങ്ങൾ "Artifacts" ആയി കാണപ്പെടുന്നു; ഇത് ഒരു പ്രത്യേക ഗ്രാഫിക്സ് എഡിറ്റർ തുറക്കാതെ തന്നെ ചിത്രങ്ങൾ കാണിച്ചുതരുന്ന Claude-നുള്ള ഒരു പ്രത്യേക വ്യൂ ആണ്. ഈ ഘട്ടത്തിൽ മക്കപ്പുകൾ Claude-ന്റെ വർക്ക്സ്പേസിൽ മാത്രമേ നിലനിൽക്കുന്നുള്ളൂ; അവ കോഡാക്കി മാറ്റുന്നതിന് മുമ്പ് നിങ്ങൾ അവ ഫയൽ സിസ്റ്റത്തിൽ സേവ് ചെയ്യേണ്ടതുണ്ട്.

AI അധിഷ്ഠിത വികസനത്തിൽ ഇതിന്റെ പ്രാധാന്യം

ഈ കമാൻഡ് സോഫ്റ്റ്‌വെയർ ഡെവലപ്‌മെന്റ് ലൈഫ് സൈക്കിളിലെ ഡിസൈൻ, കോഡിംഗ് എന്നീ രണ്ട് ഘട്ടങ്ങളെ ഒന്നാക്കി മാറ്റുന്നു. വേഗതയ്ക്ക് മുൻഗണന നൽകുന്ന ടീമുകൾക്ക് ഒറ്റ പ്രോംപ്റ്റിലൂടെ ഒന്നിലധികം ലേഔട്ട് ഓപ്ഷനുകൾ നിർമ്മിക്കാനും പ്രാരംഭ ഘട്ടങ്ങൾ വേഗത്തിലാക്കാനും കഴിയും. Claude നിലവിലുള്ള കോഡ്‌ബേസ് ഉപയോഗിക്കുന്നത് കൊണ്ട്, മക്കപ്പുകൾ ബ്രാൻഡ് ശൈലിക്ക് അനുയോജ്യമായും കമ്പോണന്റ് സിസ്റ്റവുമായി പൊരുത്തപ്പെടുന്നതായുംരിക്കും. ഇത് സാധാരണ ഇമേജ് ജനറേഷന് ശേഷം ചെയ്യേണ്ട മാനുവൽ ക്ലീനപ്പ് ജോലികൾ കുറയ്ക്കുന്നു.

ലോജിക്കും സൗന്ദര്യവും (aesthetics) ഒരുപോലെ കൈകാര്യം ചെയ്യുന്ന ഒരു "AI സോഫ്റ്റ്‌വെയർ എഞ്ചിനീയറിലേക്കുള്ള" ചുവടുവെപ്പായി Anthropic ഇതിനെ അവതരിപ്പിക്കുന്നു. ടെർമിനലിന് ഒരു മൾട്ടി-മോഡൽ വർക്ക്സ്പേസായി പ്രവർത്തിക്കാൻ കഴിയുമെങ്കിൽ, കോഡ് എഴുതുന്നതും യൂസർ എക്സ്പീരിയൻസ് രൂപപ്പെടുത്തുന്നതും തമ്മിലുള്ള വ്യത്യാസം ഗണ്യമായി കുറയും.

നിലവിലെ പരിമിതികൾ

ഈ ഫീച്ചർ നിലവിൽ പ്രിവ്യൂ (preview) ഘട്ടത്തിലാണ്. നിർമ്മിച്ച മക്കപ്പുകൾ സ്വയമേവ സോഴ്സ് ഫയലുകളായി മാറില്ല; നിങ്ങൾ അവ എക്‌സ്‌പോർട്ട് ചെയ്ത് സംയോജിപ്പിക്കേണ്ടതുണ്ട്. ഡസൻ കണക്കിന് കമ്പോണന്റുകളുള്ള വലിയ പ്രോജക്റ്റുകളിൽ ഈ അധിക ഘട്ടം സമയലാഭത്തെ ബാധിച്ചേക്കാം.

ഇത് എങ്ങനെ പരീക്ഷിക്കാം

ഏറ്റവും പുതിയ പ്രിവ്യൂ ബിൽഡ് ലഭിക്കാനും /design കമാൻഡ് പ്രവർത്തനക്ഷമമാക്കാനും claude update റൺ ചെയ്യുക.

പ്രധാന കാര്യങ്ങൾ

  • സംയോജിത പ്രോട്ടോടൈപ്പിംഗ്: /design ഉപയോഗിച്ച് ടെർമിനൽ പ്രോംപ്റ്റുകളിൽ നിന്ന് നേരിട്ട് ഒന്നിലധികം UI ആർട്ട്‌ബോർഡുകൾ നിർമ്മിക്കാം.
  • കോൺടെക്സ്റ്റ് അനുരൂപത: നിലവിലുള്ള ഡിസൈൻ സിസ്റ്റവുമായി മക്കപ്പുകൾ പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ Claude നിലവിലെ കോഡ്‌ബേസ് പരിശോധിക്കുന്നു.
  • ലളിതമായ വർക്ക്ഫ്ലോ: Claude Design-ന്റെ പ്രോംപ്റ്റിംഗ് കരുത്തും Claude Code-ന്റെ പ്രവർത്തനക്ഷമതയും സംയോജിപ്പിക്കുന്നതിലൂടെ, ടൂളുകൾ മാറാതെ തന്നെ ഡെവലപ്പർമാർക്ക് ആശയങ്ങളിൽ നിന്ന് വിഷ്വൽ പ്രോട്ടോടൈപ്പുകളിലേക്ക് മാറാൻ സാധിക്കുന്നു.

ഡിസൈൻ ടൂളുകളും കോഡ് എഡിറ്ററുകളും തമ്മിലുള്ള ഇടപഴകലുകൾ കുറയ്ക്കുന്നതിലൂടെ, ടെർമിനലിൽ നിന്ന് നേരിട്ട് UI മക്കപ്പുകൾ നിർമ്മിക്കാനും പരിഷ്കരിക്കാനും Anthropic-ന്റെ പുതിയ /design കമാൻഡ് ഡെവലപ്പർമാരെ സഹായിക്കുന്നു. വേഗത്തിൽ പ്രവർത്തിക്കുന്ന പല ടീമുകളും നേരിടുന്ന ഒരു തടസ്സമാണ് ഈ ഇടപഴകലുകൾ.

CLI പ്രോംപ്റ്റിൽ നിന്ന് വിഷ്വൽ ഡ്രാഫ്റ്റുകൾ നിർമ്മിക്കുന്നു

/design a few options for a login screen എന്നതുപോലെയുള്ള ഒരു കമാൻഡ് ടൈപ്പ് ചെയ്യുമ്പോൾ Claude ഒരു കൂട്ടം ഇന്ററാക്ടീവ് ആർട്ട്‌ബോർഡുകൾ നൽകുന്നു. ഓരോ ആർട്ട്‌ബോർഡിലും ഉയർന്ന നിലവാരമുള്ള മക്കപ്പുകൾ കാണാം; ഇവ പരിശോധിക്കാനും താരതമ്യം ചെയ്യാനും തുടർ ചോദ്യങ്ങളിലൂടെ പരിഷ്കരിക്കാനും നിങ്ങൾക്ക് സാധിക്കും.

Claude നിലവിലെ പ്രോജക്റ്റിലെ ഫയലുകൾ വായിക്കുകയും കളർ പാലറ്റുകൾ, കമ്പോണന്റ് ലൈബ്രറികൾ, ലേഔട്ട് രീതികൾ എന്നിവ വേർതിരിച്ചെടുക്കുകയും ചെയ്യുന്നു, തുടർന്ന് ഡിസൈനുകൾ അതിനനുസരിച്ച് ക്രമീകരിക്കുന്നു. ഫലങ്ങൾ "Artifacts" ആയി കാണപ്പെടുന്നു; ഇത് ഒരു പ്രത്യേക ഗ്രാഫിക്സ് എഡിറ്റർ തുറക്കാതെ തന്നെ ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കുന്ന ഒരു വ്യൂ ആണ്. ഈ ഘട്ടത്തിൽ മക്കപ്പുകൾ Claude-ന്റെ വർക്ക്സ്പേസിൽ മാത്രമേ നിലനിൽക്കുന്നുള്ളൂ; അവ കോഡാക്കി മാറ്റുന്നതിന് മുമ്പ് നിങ്ങൾ അവ ഫയൽ സിസ്റ്റത്തിൽ സേവ് ചെയ്യേണ്ടതുണ്ട്.

ടെർമിനലിലെ ഡിസൈൻ ടൂളിനെ ഡെവലപ്പർമാർ ഇഷ്ടപ്പെടുന്നത് എന്തുകൊണ്ട്?

മിക്ക ഡെവലപ്പർമാരും അവരുടെ ദിവസത്തിന്റെ വലിയൊരു ഭാഗം കോഡ് ടെർമിനലും UI ഡിസൈൻ ആപ്പും തമ്മിൽ മാറിമാറി ഉപയോഗിച്ചു ചെലവഴിക്കുന്നു. കോഡ് എഴുതുന്ന അതേ വിൻഡോയിലേക്ക് വിഷ്വൽ പ്രോട്ടോടൈപ്പിംഗ് കൊണ്ടുവരുന്നത് സോഫ്റ്റ്‌വെയർ ഡെവലപ്‌മെന്റ് ലൈഫ് സൈക്കിളിലെ രണ്ട് ഘട്ടങ്ങളെ ഒന്നാക്കി മാറ്റുന്നു.

വേഗതയ്ക്ക് മുൻഗണന നൽകുന്ന ടീമുകൾക്ക്, ഒറ്റ പ്രോംപ്റ്റിലൂടെ ഒന്നിലധികം ലേഔട്ട് ഓപ്ഷനുകൾ നിർമ്മിക്കുന്നത് പ്രാരംഭ ഘട്ടങ്ങൾ വേഗത്തിലാക്കാൻ സഹായിക്കും. നിലവിലുള്ള കോഡ്‌ബേസ് Claude പരിശോധിക്കുന്നത് വഴി മക്കപ്പുകൾ ബ്രാൻഡ് ശൈലിക്ക് അനുയോജ്യമായും പ്രോജക്റ്റിന്റെ കമ്പോണന്റ് സിസ്റ്റവുമായി പൊരുത്തപ്പെടുന്നതായും ഉറപ്പാക്കുന്നു. ഇത് സാധാരണ ഇമേജ് ജനറേഷന് ശേഷം ചെയ്യേണ്ട മാനുവൽ ക്ലീനപ്പ് ജോലികൾ കുറയ്ക്കുന്നു.

ലോജിക്കും സൗന്ദര്യവും ഒരുപോലെ കൈകാര്യം ചെയ്യാൻ കഴിയുന്ന ഒരു "AI സോഫ്റ്റ്‌വെയർ എഞ്ചിനീയറിലേക്കുള്ള" ചുവടുവെപ്പായി Anthropic ഈ പുതിയ ഫീച്ചറിനെ അവതരിപ്പിക്കുന്നു. ടെർമിനലിന് ഒരു മൾട്ടി-മോഡൽ വർക്ക്സ്പേസായി പ്രവർത്തിക്കാൻ കഴിയുമെങ്കിൽ, കോഡ് എഴുതുന്നതും യൂസർ എക്സ്പീരിയൻസ് രൂപപ്പെടുത്തുന്നതും തമ്മിലുള്ള വ്യത്യാസം കുറയും.

Limitations and the Case for Traditional Design Tools

The feature is still in preview, and several practical constraints remain. First, the generated mockups do not automatically become source files; developers must export and integrate them manually. That extra step can erode the time savings for larger projects where dozens of components need to be synced.

What to Watch as the Feature Matures

Anthropic’s update notes that the command can be enabled with a simple claude update.

Takeaway: Embedding a design prompt inside Claude Code’s terminal gives developers a shortcut from concept to visual prototype, but the workflow still depends on manual hand-off and lacks the depth of dedicated UI tools. Its evolution will decide whether the command remains a niche convenience or becomes a core part of an AI-driven development stack.