Anthropic yaongeza amri ya /design kwenye Claude Code kwa ajili ya UI Mockups za Terminal

Anthropic imeipanua Claude Code kwa amri mpya ya /design inayowaruhusu watengenezaji (developers) kuunda, kuboresha, na kuona UI mockups bila kuondoka kwenye terminal.

Uundaji wa Mifano ya UI (UI Prototyping) Moja kwa Moja kwenye Terminal

Badala ya kuruka-ruka kati ya Figma na shell, sasa unaweza kuandika kitu kama /design a few options for a login screen. Claude hujibu kwa kutoa "artboards" kadhaa zinazoweza kuingiliana ambazo huonyesha mockups za hali ya juu (high-fidelity). Unalinganisha mpangilio (layouts), unachagua unaoupenda, na unaboresha muonekano kwa kuuliza maswali ya ziada—yote haya kabla ya kuandika mstari mmoja wa kodi ya uzalishaji (production code).

Mockups Zinazozingatia Muktadha (Context-Aware) kutoka kwenye Codebase Yako

Mtengenezaji Nate Parrott anabainisha kuwa Claude kwa kweli husoma repository ya sasa. Inachukua paleti za rangi (colour palettes), maktaba za vipengele (component libraries), na kanuni za mpangilio, kisha inarekebisha kila usanifu ili uendane na mtindo uliopo wa mradi. Matokeo huonekana kama “Artifacts,” mtazamo maalum ndani ya Claude unaoonyesha picha bila kufungua programu nyingine ya michoro. Katika hatua hii, mockups zipo kwenye nafasi ya kazi (workspace) ya Claude pekee; lazima uzihifadhi waziwazi kwenye mfumo wa faili kabla ya kuzigeuza kuwa kodi.

Kwa Nini Ni Muhimu kwa Maendeleo Yanayosaidiwa na AI

Amri hii inaunganisha hatua mbili za mzunguko wa maisha ya maendeleo ya programu (software development life cycle)—usanifu na uandishi wa kodi—kuwa moja. Timu zinazozingatia kasi zinaweza kuzalisha chaguzi nyingi za mpangilio kwa amri moja (prompt), hivyo kuharakisha hatua ya awali ya ugunduzi. Kwa sababu Claude inatumia codebase iliyopo, mockups hubaki zikiwa na utambulisho wa chapa (on-brand) na zinaoana na mfumo wa vipengele, hivyo kupunguza usafishaji wa kurekebisha kwa mkono unaofuata baada ya kuzalisha picha za jumla.

Anthropic inaelezea hili kama hatua kuelekea "mhandisi wa programu wa AI" (AI software engineer) anayeshughulikia mantiki (logic) na urembo (aesthetics). Ikiwa terminal inaweza kutumika kama nafasi ya kazi ya njia nyingi (multi-modal workspace), mpaka kati ya kuandika kodi na kuunda uzoefu wa mtumiaji (user experience) unapungua kwa kiasi kikubwa.

Vikwazo vya Sasa

Kipengele hiki bado kiko katika hatua ya majaribio (preview). Mockups zilizozalishwa hazigeuzwi kuwa faili za chanzo (source files) moja kwa moja; lazima uzizoeze (export) na uzijumuishe mwenyewe. Hatua hiyo ya ziada inaweza kupunguza muda unaookolewa, hasa kwenye miradi mikubwa yenye vipengele vingi.

Jinsi ya Kujaribu

Run claude update ili kupata toleo jipya la majaribio na kuwezesha amri ya /design.

Mambo Muhimu ya Kuzingatia

  • Uundaji wa Mifano Uliojumuishwa: /design inazalisha artboards nyingi za UI moja kwa moja kutoka kwenye amri za terminal.
  • Uwiano wa Muktadha: Claude inachunguza codebase ya sasa ili kuweka mockups zikiwa zimeoana na mfumo wa usanifu uliopo.
  • Mtiririko wa Kazi uliorahisishwa: Kwa kuunganisha nguvu ya amri za Claude Design na utendaji wa Claude Code, watengenezaji wanahama kutoka kwenye dhana hadi kwenye mfano wa picha bila kubadilisha zana.

Amri mpya ya /design ya Anthropic inawaruhusu watengenezaji kuunda na kuboresha UI mockups moja kwa moja kutoka kwenye terminal, ikipunguza uratibu wa mara kwa mara kati ya zana za usanifu na programu za kodi—kizuizi ambacho timu nyingi zinazofanya kazi kwa kasi bado zinapambana nacho.

Kuzalisha Rasimu za Picha kutoka kwenye Amri ya CLI

Unataja amri kama /design a few options for a login screen na Claude anarudisha seti ya artboards zinazoweza kuingiliana. Kila artboard inaonyesha mockup ya hali ya juu ambayo unaweza kuikagua, kuilinganisha, na kuiboresha kwa kuuliza maswali ya ziada.

Claude husoma faili katika mradi wa sasa, huchukua paleti za rangi, maktaba za vipengele, na kanuni za mpangilio, kisha anarekebisha usanifu ili uendane. Matokeo huonekana kama “Artifacts,” mtazamo unaoonyesha picha bila kufungua programu nyingine ya michoro. Katika hatua hii, mockups zipo kwenye nafasi ya kazi ya Claude pekee; lazima uzihifadhi waziwazi kwenye mfumo wa faili kabla ya kuzigeuza kuwa kodi.

Kwa Nini Watengenezaji Wanavutiwa na Zana ya Usanifu kwenye Terminal

Watengenezaji wengi hutumia sehemu kubwa ya siku yao kubadilisha kati ya terminal ya kodi na programu ya usanifu wa UI. Kuleta uundaji wa mifano ya picha kwenye dirisha lilelile ambapo kodi huandikwa kunaunganisha hatua mbili za mzunguko wa maisha ya maendeleo ya programu kuwa moja.

Kwa timu zinazozingatia kasi, kuzalisha chaguzi nyingi za mpangilio kwa amri moja kunaweza kuharakisha hatua ya awali ya ugunduzi. Usomaji wa Claude wa codebase iliyopo huweka mockups zikiwa na utambulisho wa chapa na zinaoana na mfumo wa vipengele wa mradi, hivyo kupunguza usafishaji wa kurekebisha kwa mkono unaofuata baada ya hatua ya kuzalisha picha za jumla.

Anthropic inaelezea nyongeza hii kama hatua kuelekea "mhandisi wa programu wa AI" anayeweza kushughulikia mantiki na urembo. Ikiwa terminal sasa inaweza kutumika kama nafasi ya kazi ya njia nyingi (multi-modal workspace), mpaka kati ya kuandika kodi na kuunda uzoefu wa mtumiaji unakuwa mwembamba zaidi.

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.